/* defaults; can be overridden by controls via CSS vars */ .itb-v2-wrapper{ --itb-img-w: 50%; --itb-gap-x: 40px; display: flex; flex-wrap: wrap; width: 100%; position: relative; } /* split columns using var width */ .itb-v2-content, .itb-v2-image{ flex: 0 0 calc(100% - var(--itb-img-w)); max-width: calc(100% - var(--itb-img-w)); /* padding-left: calc(var(--itb-gap-x) / 2); padding-right: calc(var(--itb-gap-x) / 2);*/ display: flex; align-items: center; } .itb-v2-image{ flex-basis: var(--itb-img-w); max-width: var(--itb-img-w); justify-content: center; } /* ordering preserved via BEM modifiers */ .itb-v2--image-left .itb-v2-image{ order: 0; } .itb-v2--image-left .itb-v2-content{ order: 1; } .itb-v2--image-right .itb-v2-content{ order: 0;} .itb-v2--image-right .itb-v2-image{ order: 1; } /* inner container */ .itb-v2-container{ width: 100%; margin: 0 auto; box-sizing: border-box; padding-top: 20px; } /* image */ .itb-v2-image img{ display: block; width: 100%; height: auto; /* aspect-ratio + object-fit from controls will adjust */ object-fit: cover; } /* text */ .itb-v2-title{ margin: 0 0 20px; } .itb-v2-description{ margin: 0; font-size: clamp(.7875rem, .9375vw, 1.125rem); text-justify: inter-word; /* improves justified paragraphs where supported */ hyphens: auto; } /* side paddings as in your original */ .itb-v2-container-left{ padding-right: 40px; } .itb-v2-container-right{ padding-left: 40px; margin-right: 17%; } @media (min-width: 1441px){ .itb-v2-container-right{ margin-right: 0; } } /* responsive */

@media (max-width: 1023px) {
    .itb-v2-content, .itb-v2-image{ 
        flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; 
    } 
    .itb-v2-wrapper.itb-v2--image-right {
        flex-direction: column-reverse;
    }
    .itb-v2-container {
        padding-right: 20px !important;
        padding-left: 20px !important;
        padding-bottom: 20px;
        padding-top: 20px;
        margin: initial
    }
}


/* .itb-v2-wrapper{ flex-direction: column; } */