


1. The card only works if the height is set in solid values: contain_06n500, height:6vw

3. This is if this extra text content is added inside the contain_06n501 container. The added text then expands the vertical dimension to fit inside it and the image displays above the added text. Something "solid" needs to define the height from the inside and not in relative terms to the previous container (wrap_06n500).
3. This is if this extra text content is added inside the contain_06n501 container. The added text then expands the vertical dimension to fit inside it and the image displays above the added text. Something "solid" needs to define the height from the inside and not in relative terms to the previous container (wrap_06n500).
wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;} @media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;} @media (min-width:1025px) {.contain_06n5 {height:12vw;}} .card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}




This too enables the automatic generation of cards

wrap_06n5 {padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; height:max-content; overflow:hidden;} @media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}}

.contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;} @media (min-width:1025px) {.contain_06n5 {height:12vw;}} .card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}




Structural components: Cards column_06n5 (not activated) ‹section› Wrap ≥ Dotted red ≥ VarHEIGHT max-content. (Cardstart) ‹article› Contain ≥ Dotted blue ≥ DefHEIGHT in vw(R). | 50%WIDTH ‹article› Card ≥ Base card ≥ 100%HEIGHT | 100%WIDTH - Absolute ‹div› Layer ≥ Interactive card overlays
Structural components: Excerpts ‹article› wrapper_01 ≥ Fine line ≥ HEIGHT100% b,m,pad ‹div› class=pw5 ≥ Additional post_wrap formatter [ lgc_column ] ≥ Card size within column, responsive px_l line ≥ Top 1px image corrects full width of frame_01 ‹section› frame_01 ≥ Base card. Post_wrap, Float & margins ‹section› crop_01 ≥ IMG W/H in% (R) - Relative ‹img› ≥ Op% - Absolute ‹section› container_01 ≥ Content container ± ‹div's for title_01+ body_01›
Structural components CARDS ‹header› BBLw ≥ Page margins ≥ Local ‹column› Column ≥ Dashed grey ≥ Local ‹section› Wrap ≥ Dotted red ≥ Local or Shortcode (Cardstart) ‹article› Contain ≥ Dotted blue ≥ Local or Shortcode ‹article› Card ≥ Base card ≥ Local or Shortcode ‹div› Layer ≥ Interactive card overlays
.wrap_06n5 {height:max-content; padding:0 5px 7px; border:2px dotted red; margin:0 0.4vw 0.4vw 0; overflow:hidden;} @media (min-width:1025px) {.wrap_06n5 {background:rgba(240,240,252,1);}} .contain_06n5 {float:left; position:relative; top:0; left:0; width:50%; background:rgba(0,200,230,0.3); border:2px dashed dodgerblue;} @media (min-width:1025px) {.contain_06n5 {height:12vw;}} .card_06n5 img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; border-radius:10px;} .card_06n5 {position:absolute; width:100%; height:100%; box-shadow:0px 7px 10px rgba(0,0,0,0.5); border:0px dashed red; border-radius:10px;}
.wrapper_01 {height:100%; border:1px solid rgba(100,120,230,0.1); margin:0 0 2px 0!important; border-radius:3px; overflow:hidden; background:none;} @media (min-width:1025px) {.wrapper_01 {padding:0.2vw 0.3vw 0.2vw;}} .container_01 {position:relative; overflow:hidden; background-color:%%container_01_bkg:rgba(255,255,255,1)%%;} @media (min-width:1025px) {.container_01 {min-width:%%container_01_pc_W:69% %%; min-height:22.5%; padding:%%container_01_pc_pdg:1px 1px 1px 8px%%;}} .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:none; float:%%crop_float_01:left%%; margin:%%crop_01_mrg:0 1% 4px 0%%;} @media (min-width:1025px) {.crop_01 {min-width:%%crop_01_pc_W:30% %%; padding-top:%%crop_01_pc_H:30% %%;}}