IMG SquareCrop1 Responsive card incl. image cropping
SquareCrop1
Quote - Comment
SquareCrop1 Title
SquareCrop1
SC for the crop/hover img: 
sc name="card1" N="A3" W="30%" 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)"
contain_02 · title_02 · body_02
Quote - Comment
Most up to date card shortcode.
Edit SC
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%}
Title_00n_o
Description_00n_o
Title_00n
Description_00n
Title_00n_o
Description_00n_o
Title_00n
Description_00n
Card title
This is the body content of the card. The cropped image is sized responsively W/H (PC, Tab, Mob) relative to a % width of the card container (,itself a % of the vw via the LGC). All the other card components – caption, title and body – are also built responsively using vw. The main design solution is in the s_crop_01 container class which contains the image and caption, set using width via minimum-width% and height via padding-top%. This allows for precise layout control across platforms and enhanced readability on smaller screens.
See detailed card structure using s_crop_01 img (min-width:n% & padding-top:n%) 1 – post_wrap00 full width container 2 – LGC responsive column inlc. post_wrap2 + margin 3 – s_crop_01 container: W/H % of LGC 4 – s_crop_01 img 100% of the above [ wpbb post:featured_image size=’thumbnail’ align=’left’ linked=’yes’] [ wpbb post:featured_image size=’medium’ align=’left’ linked=’yes’] [ wpbb post:featured_image size=’large’ align=’left’ linked=’yes’] [ wpbb post:featured_image size=’full’ align=’left’ linked=’yes’]
I
News
Card title
This is the body content of the card. The cropped image is sized responsively W/H (PC, Tab, Mob) relative to a % width of the card container (,itself a % of the vw via the LGC). All the other card components – caption, title and body – are also built responsively using vw. The main design solution is in the s_crop_01 container class which contains the image and caption, set using width via minimum-width% and height via padding-top%. This allows for precise layout control across platforms and enhanced readability on smaller screens.
See detailed card structure using s_crop_01 img (min-width:n% & padding-top:n%) 1 – post_wrap00 full width container 2 – LGC responsive column inlc. post_wrap2 + margin 3 – s_crop_01 container: W/H % of LGC 4 – s_crop_01 img 100% of the above
I
News
The IMG container uses s_crop_01 img (min-width:n% & padding-top:n%)
CSS for the crop and caption (local)
.s_crop_01 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:51; opacity:1;}
.s_crop_01     {position:relative; overflow:hidden; background-color:teal; float:left; margin:0 2vw 4px 0;}
@media (min-width:1025px) {.s_crop_01 {min-width:25%; padding-top:25%!important;}}
.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%;}}
Containers: post_wrap00 | LGC55 | post_wrap2,mg | s_crop_01 HTML [ /LGC]‹article class=”post_wrap2″ style=”margin-right:1.4vw;”› ‹section class=“s_crop_01″›‹img class=”p1” src=”[ wpbb post:acf type=’text’ name=’acf_im2′]” alt=”I” /› ‹div class=”caption_01″›‹f700›News‹/f700›‹/div› ‹/section› ‹div class=”title_01 p1B”›post_wrap00 | LGC55 | post_wrap2,mg | s_crop_01‹/div›
pre w. CSS
‹/article›[ /LGC]
IMG SquareCrop1 |   Cropping images @square | c140 tag / property (contains local style .imgcrop,1,2)
I 140-b2 
‹img class="c140 p1" style="margin:0 14px 0 0;" src="[ wpbb post:acf type='text' name='acf_im2']"›
I160-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Caption: Øsub1
Card11debug Find the best travel routes off the beaten paths. “Det er viktig å gi litt f… noen ganger, og alt behøver ikke å være perfekt. Frigjør energi og tro på det du kan få til.”
▷More…
I80-0 I90-1 I100-2 I100-2 I110-0 I120-4 I130-5 I140-6 I150-7
I160-2 I170-7 I180-2 I190-7 I200-2