Cropped, excerpts & cardsSCResponsive-adaptive size texts and image cards

1 CARD1 Edit SC=card1

Cropped, excerpts & cards
Feed from acf_quote.
Cropped, excerpts & cards Title

The card1 shortcode detailed in column 1 makes it very easy to insert a hover/crop card image. The card height finally controlled by % thru padding-top in the card container.

.contain {width:x%; padding-top:y%}
The right side contain/title/body has classes available in the shortcode css, suffix_id’ed with same N=value.

SC VARIABLES (This local mini info based on excerpt local:html & SC:css)
Selectors: ·container_01 ·title_01 ·body_01 (css called via SC=excerpt below)
Cropped, excerpts & cards

Local var’s for card1:
sc name="card1" N="A3" W="48%" H="30%" mgnR="1.5%" img1="HYTTE.jpg" img2="LAKE.jpg" h1_Yshift="0%" h1_transit="1s" rad="0" b_="2px" b_st="dashed" b_col="dodgerblue" shadow="0px 0px 0px rgba(0,0,0,0)"

Feed from acf_quote.

2 IMG CROP sc=img (local var’s) Edit SC=img
Shortcode IMG.
This is the $$enclosed_content$$ defined in the SC.
[ sc name="img" 
wrp="post_wrap01" fl="left" W="50vw" H="12vw" f_i_size="medium" pos_w="50%" pos_h="50%" rad="4px" mrg="14px" ]
Note: object-position:%%pos_w:50% %% %%pos_h:50% %%;


View CSS file
.caption_01 {position:absolute; top:0; left:0; bottom:0; right:0; text-align:center; color:rgba(255,255,255,1); text-shadow:1px 1px #000000; z-index:53;} @media (min-width:1025px) {.caption_01 {padding:0.5vw 0.5vw; font-size:2.2vw; line-height:110%;}} @media (min-width:768px) and (max-width:1025px) {.caption_01 {padding:0.5vw 0.5vw; font-size:3.0vw; line-height:120%;}} @media only screen and (max-width:767px) {.caption_01 {padding:0.5vw 0.5vw; font-size:4.4vw; line-height:120%;}} .title_01 {position:relative; padding:0 0.5vw; text-align:left; line-height:120%; z-index:53;} @media (min-width:1025px) {.title_01 {font-size:1.5vw; margin-bottom:0.2vw; color:black;}} @media (min-width:768px) and (max-width:1025px) {.title_01 {font-size:2.7vw; margin-bottom:0.4vw; color:black;}} @media only screen and (max-width:767px) {.title_01 {font-size:4.4vw; margin-bottom:0.5vw; color:black;}} .body_01 {position:relative; padding:0 0.5vw; text-align:left; line-height:135%; z-index:53;} @media (min-width:1025px) {.body_01 {font-size:1.2vw; color:black;}} @media (min-width:768px) and (max-width: 1025px) {.body_01 {font-size:1.9vw; color:black;}} @media only screen and (max-width:767px) {.body_01 {font-size:3.4vw; color:black;}} .container_01 {position:relative; overflow:hidden; background-color:%%container_01_bkg:rgba(250,250,250,0.4)%%;} @media (min-width:1025px) {.container_01 {width:%%container_01_pc_W:69% %%; min-height:22.5%; padding:%%container_01_pc_pdg:1px 1px 1px 8px%%;}} @media (min-width:768px) and (max-width:1025px) {.container_01 {width:%%container_01_pad_W:66% %%; min-height:22.5%;}} @media only screen and (max-width:767px) {.container_01 {width:%%container_01_mob_W:66% %%; min-height:25%;}} .crop_01 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:51; opacity:%%op_pct:0.85%%;} .crop_01 {position:relative; overflow:hidden; background-color:black; float:%%crop_float_01:left%%; margin:%%crop_01_mrg:0 1% 4px 0%%;} @media (min-width:1025px) {.crop_01 {width:%%crop_01_pc_W:30% %%; padding-top:%%crop_01_pc_H:30% %%;}} @media (min-width:768px) and (max-width:1025px) {.crop_01 {width:%%crop_01_tab_W:33% %%; padding-top:22.5%;}} @media only screen and (max-width:767px) {.crop_01 {width:%%crop_01_mob_W:33% %%; padding-top:23%;}} .wrapper_01 {border:1px solid rgba(100,120,130,0.3); margin: 0 0 4px 0;} @media (min-width:1025px) {.wrapper_01 {padding:1vw 5vw 1.5vw; background:#e0e0e0; height:100%; overflow:hidden;}} @media (min-width:768px) and (max-width:1025px) {.wrapper_01 {padding:1vw 3vw; background:e0e0e0; height:100%; overflow:hidden;}} @media only screen and (max-width:767px) {.wrapper_01 {padding:1vw 1vw; background:e0e0e0; height:100%; overflow:hidden;}}
Cardstart: article class=wrapper_01 | NON PARAMETRIC VERSION
Cropped, excerpts & cards
Feed from acf_quote.

Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
Cropped, excerpts & cards
Feed from acf_quote.
Edit SC