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
 CARD1 EXPLANATION
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% %%;
2
EMPTY
 
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
News
Cropped, excerpts & cards
Feed from acf_quote.
Cardstart: article class=wrapper_01 | PARAMETRIC VERSION
News
Cropped, excerpts & cards
Feed from acf_quote.
Edit SC