/* ============================================================
   mustang-svgDraw.css
   Grid layout, media rows, SVG canvas overlay and card-flip
   animations for the mustang page animation section.
    Source: migrated from legacy prototype layout
   ============================================================ */

*, *::after, *::before {
    box-sizing: border-box;
}


.vkDivsNSvg{
    position: relative;
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}


.roadmapCon{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

}

.svg1Con {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        display: flex;
        justify-content: center;
        background-color: rgb(0, 0, 0);
        overflow: hidden;
    }

    .svg1Con canvas {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
  




.headlines{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vkGrid{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Per-row grid so we can alternate column ratios */
.vkRow{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* default: image larger */
    align-items: stretch;
    min-height: 50vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.vkRow--reverse{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); /* reversed columns */
}

.vkRow--full{
    grid-template-columns: 1fr; /* full width row */
}

.vkRow.vkRow--tier-canvas-removed {
    grid-template-columns: 1fr !important;
}

.vkRow.vkRow--tier-canvas-removed > .vkImg,
.vkRow.vkRow--tier-canvas-removed > .vkTextCon {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
}

.vkRow {
    width: 100%;
    gap: 0rem;
}

.vkRow > .vkImg,
.vkRow > .vkTextCon{
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
}

    /* Unified `.media-row` base styles. These provide a sensible default
       for all rows — thumbnails scroll horizontally and fill their
       container height. Specific layouts (e.g. inside `.vkRow`) get a
       lightweight override below. */
    .media-row {
   
        display: flex;
        gap: 2rem;
        align-items: center;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        box-sizing: border-box;
      
    }

    .media-row > img,
    .media-row > video,
    .media-row > picture {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        height: 100%;
        display: block;
        background: #000;
    }

    .media-row > img,
    .media-row > video,
    .media-row > picture > img {
        width: auto;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .media-row > picture {
        overflow: hidden;
    }

    .media-row > picture > img {
        min-width: 0;
        max-width: none;
    }

    /* Rows that live inside `.vkRow` should distribute children to fill
       the column — thumbnails expand to share space. */
    .vkRow .media-row {
        justify-content: flex-start;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
  
    }

    .vkRow .media-row > img,
    .vkRow .media-row > video,
    .vkRow .media-row > picture {
        flex: 0 0 auto;
        min-width: 0;
        width: auto;
        height: 100%;
        display: block;
    }

    .vkRow .media-row > img,
    .vkRow .media-row > video,
    .vkRow .media-row > picture > img {
        width: auto;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .vkRow .media-row > picture {
        overflow: hidden;
    }

/* When videoRoutingInit.js detects a landscape video it adds the 'horizontal'
   class and sets wrapper.style.display='block' (inline style) at loadedmetadata.
   wbHorizontalCons.css then applies width:100% to the video inside, which pulls
   the wrapper to fill the entire .media-row — evicting the two picture siblings.
   Override both the inline style (needs !important) and the CSS width here so
   the wrapper stays shrink-wrapped as one of three flex peers in the row. */
.media-row .dynamic-video-controls-wrap.horizontal {
    display: inline-block !important;
    width: auto !important;
}

.media-row .dynamic-video-controls-wrap.horizontal > video {
    width: auto;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Mustang-specific: ensure three media children share the vkRow evenly
   and prevent the central video from growing vertically and overlapping
   its siblings. Responsive fallback stacks items on narrow viewports. */
.vkRow .media-row > * {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

.vkRow .media-row > video {
    height: auto;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 700px) {
    .vkRow .media-row > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row dense !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        height: auto !important;
        overflow: visible !important;
    }

    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > * {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        aspect-ratio: 3 / 4 !important;
        overflow: hidden !important;
        align-self: stretch !important;
    }

    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > *:last-child:nth-child(odd) {
        display: none !important;
    }

    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > img,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > video,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > picture,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > .playbtn-host,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap {
        width: 100% !important;
        height: auto !important;
    }

    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > img,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > video,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > picture > img,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > .playbtn-host > video,
    section[name="mustang page animation section"] #mustangmap .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap > video {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Mustang-specific bottom row: use CSS Grid to guarantee a maximum of
   six items per row. Items beyond six wrap to the next line. Images
   are never cropped (scaled down to fit). Videos fill the cell width. */
.mustang-bottom-media-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* up to 6 items per row */
    gap: 0.75rem;
    align-items: center;
    justify-items: stretch;
    box-sizing: border-box;
    width: 100%;
}

/* Ensure each direct child fills its grid cell */
.mustang-bottom-media-row > * {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

/* Images: do not crop, preserve aspect ratio and scale down to fit */
.mustang-bottom-media-row > img {
    width: 100%;
    height: auto;
    object-fit: contain;
    background: #000;
}

/* Videos: fill the cell width (height adjusts to maintain aspect). */
.mustang-bottom-media-row > video {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.mustang-bottom-media-row > picture {
    display: block;
    width: 100%;
    height: auto;
}

.mustang-bottom-media-row > picture > img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    background: #000;
}

/* Responsive fallbacks: fewer columns on narrow viewports */
@media (max-width: 900px) {
    .mustang-bottom-media-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile Mustang bottom row:
   keep items grouped in 3+3 and lock row heights to avoid late media reflow. */
@media (max-width: 767px) {
    .mustang-bottom-media-row:not(.is-mobile-grouped) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        grid-auto-rows: clamp(96px, 30vw, 150px);
        align-items: stretch;
    }

    .mustang-bottom-media-row:not(.is-mobile-grouped) > * {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
    }

    .mustang-bottom-media-row:not(.is-mobile-grouped) > img,
    .mustang-bottom-media-row:not(.is-mobile-grouped) > video,
    .mustang-bottom-media-row:not(.is-mobile-grouped) > picture > img {
        width: auto;
        max-width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    section[name="mustang page animation section"] .mustang-bottom-media-row.is-mobile-grouped {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    section[name="mustang page animation section"] .mustang-bottom-media-row.is-mobile-grouped > .mustang-bottom-media-group {
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    section[name="mustang page animation section"] .mustang-bottom-media-row.is-mobile-grouped > .mustang-bottom-media-group > * {
        background: #000;
    }
}

/* Ensure vk text and image blocks occupy the grid row (~50vh) */
.vkTextCon,
.vkImg{
    min-height: 50vh;
    height: 100%;
    box-sizing: border-box;
}



.vKitem-1{
    grid-column-start: 1;
    grid-row-start: 1;

}

.vKitem-2-img{
    grid-column-start: 1;
    grid-row-start: 2;

}

.vKitem-1-1{
    grid-column-start: 1;
    grid-row-start: 2;

}

.vKitem-2{ 
      grid-column-start: 2;
    grid-row-start: 2;
}

.vKitem-3{ 
    grid-column-start: 1;
    grid-row-start: 3;

}

.vKitem-3-img{
    grid-column-start: 2;
    grid-row-start: 3;

}


.vKitem-4{ 
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;


}


.vkImg img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    background-color: transparent;
}

.vkImg picture > img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    background-color: transparent;
}

/* Ensure `vkImg` and `vKitem-1` containers center content and hide overflow
   so images/videos can size to the parent's height while preserving aspect. */
.vkImg,
.vKitem-1 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Images and videos inside these containers should fill the parent's height
   and preserve their aspect ratio. `object-fit: cover` ensures no empty gaps. */
.vkImg img,
.vkImg video,
.vkImg picture > img,
.vKitem-1 img,
.vKitem-1 picture > img,
.vKitem-1 video {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Card-flip (deck) animation for callout-socials-card-layout */
.callout-socials-card-layout{
    perspective: 1400px;
    -webkit-perspective: 1400px;
}

.callout-socials-card-layout .vkImg,
.callout-socials-card-layout .vKitem-1,
.vkImg.vKitem-1{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.callout-socials-card-layout .vkImg img,
.callout-socials-card-layout .vKitem-1 img,
.vkImg.vKitem-1 img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0) rotateX(0deg);
    animation-name: cardFlipIn;
    animation-duration: 700ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2,.9,.25,1);
}

@keyframes cardFlipIn{
    0%   { transform: translateZ(-220px) rotateX(90deg); opacity: 0; }
    45%  { transform: translateZ(40px)   rotateX(-12deg); opacity: 1; }
    100% { transform: translateZ(0)      rotateX(0deg);   opacity: 1; }
}

/* Staggered delays to create the "deck" effect. */
.callout-socials-card-layout .vkImg:nth-child(1) img  { animation-delay:   0ms; }
.callout-socials-card-layout .vkImg:nth-child(2) img  { animation-delay:  80ms; }
.callout-socials-card-layout .vkImg:nth-child(3) img  { animation-delay: 160ms; }
.callout-socials-card-layout .vkImg:nth-child(4) img  { animation-delay: 240ms; }
.callout-socials-card-layout .vkImg:nth-child(5) img  { animation-delay: 320ms; }
.callout-socials-card-layout .vkImg:nth-child(6) img  { animation-delay: 400ms; }
.callout-socials-card-layout .vkImg:nth-child(7) img  { animation-delay: 480ms; }
.callout-socials-card-layout .vkImg:nth-child(8) img  { animation-delay: 560ms; }
.callout-socials-card-layout .vkImg:nth-child(9) img  { animation-delay: 640ms; }
.callout-socials-card-layout .vkImg:nth-child(10) img { animation-delay: 720ms; }
.callout-socials-card-layout .vkImg:nth-child(11) img { animation-delay: 800ms; }
.callout-socials-card-layout .vkImg:nth-child(12) img { animation-delay: 880ms; }

.callout-socials-card-layout .vKitem-1:nth-child(1) img  { animation-delay:   0ms; }
.callout-socials-card-layout .vKitem-1:nth-child(2) img  { animation-delay:  80ms; }
.callout-socials-card-layout .vKitem-1:nth-child(3) img  { animation-delay: 160ms; }
.callout-socials-card-layout .vKitem-1:nth-child(4) img  { animation-delay: 240ms; }

/* Hover re-trigger */
.callout-socials-card-layout:hover .vkImg img,
.callout-socials-card-layout:hover .vKitem-1 img{
    animation-name: cardFlipHover;
    animation-duration: 600ms;
    animation-timing-function: cubic-bezier(.25,.8,.25,1);
}

@keyframes cardFlipHover{
    0%   { transform: translateZ(0) rotateX(0deg); }
    50%  { transform: translateZ(60px) rotateX(-180deg); }
    100% { transform: translateZ(0) rotateX(0deg); }
}

.vkImg.vKitem-1 img,
.vkImg.vKitem-1 video,
.vkImg.vKitem-1 picture > img,
.vKitem-1 .vkImg img,
.vKitem-1 .vkImg video,
.vKitem-1 .vkImg picture > img,
.vkImg.vKitem-2 img,
.vkImg.vKitem-2 video,
.vkImg.vKitem-2 picture > img,
.vKitem-2 .vkImg img,
.vKitem-2 .vkImg video,
.vKitem-2 .vkImg picture > img,
.vkImg.vKitem-2-img img,
.vkImg.vKitem-2-img video,
.vkImg.vKitem-2-img picture > img,
.vKitem-2-img .vkImg img,
.vKitem-2-img .vkImg video,
.vKitem-2-img .vkImg picture > img,
.vkImg.vKitem-3-img img,
.vkImg.vKitem-3-img video,
.vkImg.vKitem-3-img picture > img,
.vKitem-3-img .vkImg img,
.vKitem-3-img .vkImg picture > img,
.vKitem-3-img .vkImg video {
    height: auto;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.vkRow,
.vkImg,
.vKitem-1,
.vKitem-2,
.vKitem-2-img,
.vKitem-3-img,
.vkImg .media-row,
.vKitem-1 .media-row,
.vKitem-2 .media-row,
.vKitem-2-img .media-row,
.vKitem-3-img .media-row {
    box-sizing: border-box;
    min-height: 50vh;
    overflow: hidden;
}
    .vkGrid{
                row-gap: 0.5rem;
    }
/* Responsive fallback: stack columns on small screens */
@media (max-width: 800px){
    .vkGrid{
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        row-gap: 0.5rem;
        width: 95%;
    }

    .vkRow,
    .vkRow > .vkImg,
    .vkRow > .vkTextCon,
    .vkRow .media-row,
    .vkImg .media-row,
    .vKitem-1 .media-row,
    .vKitem-2 .media-row,
    .vKitem-2-img .media-row,
    .vKitem-3-img .media-row {
        min-height: 0 !important;
    }

    .vKitem-1,
    .vKitem-2,
    .vKitem-2-1,
    .vkImg,
    .vkTextCon{
        height: auto;
        min-height: 0;
    }
}

.vkRow > .vkImg img,
.vkRow > .vkImg video,
.vkRow > .vkImg picture > img,
.vkRow .vkImg img,
.vkRow .vkImg picture > img,
.vkRow .vkImg video {
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Re-apply media-row parity after picture migration:
   picture/img/video share row height and fill the full row width together. */
.vkGrid .media-row {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.vkGrid .media-row > picture,
.vkGrid .media-row > video,
.vkGrid .media-row > img {
    flex: 0 0 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    display: block;
}

.vkGrid .media-row > picture > img,
.vkGrid .media-row > video,
.vkGrid .media-row > img {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vkGrid .vkRow .media-row > video {
    height: 100%;
    max-height: none;
}

/* Final lock: legacy selectors set video height:auto in many places.
   Keep vkGrid row media equal-height even when .media-row also has .playbtn-host. */
.vkGrid .vkRow .media-row > picture,
.vkGrid .vkRow .media-row > video,
.vkGrid .vkRow .media-row > img,
.vkGrid .vkRow .media-row.playbtn-host > picture,
.vkGrid .vkRow .media-row.playbtn-host > video,
.vkGrid .vkRow .media-row.playbtn-host > img {
    height: 100% !important;
    min-height: 0;
    align-self: stretch;
}

.vkGrid .vkRow .media-row > picture > img,
.vkGrid .vkRow .media-row > video,
.vkGrid .vkRow .media-row > img,
.vkGrid .vkRow .media-row.playbtn-host > picture > img,
.vkGrid .vkRow .media-row.playbtn-host > video,
.vkGrid .vkRow .media-row.playbtn-host > img {
    height: 100% !important;
    width: auto !important;
    object-fit: cover !important;
    display: block;
}

/* Keep vkGrid media rows aspect-ratio aware: each item keeps its natural width,
   row height is shared, and spacing stays consistent. */
.vkGrid .vkRow .media-row {
    gap: 2rem !important;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
}

.vkGrid .vkRow .media-row > * {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
}

.vkGrid .vkRow .media-row > picture,
.vkGrid .vkRow .media-row > video,
.vkGrid .vkRow .media-row > img,
.vkGrid .vkRow .media-row > .playbtn-host,
.vkGrid .vkRow .media-row > .dynamic-video-controls-wrap,
.vkGrid .vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap {
    height: 100% !important;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.vkGrid .vkRow .media-row > picture > img,
.vkGrid .vkRow .media-row > video,
.vkGrid .vkRow .media-row > img,
.vkGrid .vkRow .media-row > .playbtn-host > video,
.vkGrid .vkRow .media-row > .dynamic-video-controls-wrap > video,
.vkGrid .vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap > video {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* Mobile vkGrid: use a clean two-column media grid. */
@media (max-width: 1200px) {
    .vkGrid,
    .vkRow {
        width: 100%;
        max-width: min(100vw, 100dvw);
        overflow-x: hidden;
    }

    .vkRow,
    .vkRow--reverse,
    .vkRow--full {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .vkGrid .vkRow.vkRow--tier-canvas-removed {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }

    .vkGrid .vkRow.vkRow--tier-canvas-removed > .vkImg,
    .vkGrid .vkRow.vkRow--tier-canvas-removed > .vkTextCon {
        min-height: 0 !important;
        height: auto !important;
    }

    .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row {
        min-height: 0 !important;
        height: auto;
    }

    /* Mobile Mustang contract: media rows become a simple 2-column grid. */
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row {
        width: 100%;
        max-width: min(100vw, 100dvw);
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > * {
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > picture,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > video,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > img,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > .playbtn-host,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > .dynamic-video-controls-wrap {
        width: 100% !important;
        height: auto !important;
    }

    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > picture > img,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > video,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > img,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > .playbtn-host > video,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > .dynamic-video-controls-wrap > video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
        aspect-ratio: 1 / 1 !important;
    }

    .vkGrid .vkRow > .vkImg,
    .vkGrid .vkRow > .vkTextCon,
    .vkGrid .vkRow.vkRow--tier-canvas-removed > .vkImg,
    .vkGrid .vkRow.vkRow--tier-canvas-removed > .vkTextCon {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > picture > img,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > video,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > img,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > .playbtn-host > video,
    section[name="mustang page animation section"] .vkGrid .vkRow.vkRow--tier-canvas-removed .media-row > .dynamic-video-controls-wrap > video {
        object-fit: contain !important;
    }
}

/* Final Mustang media-row contract:
   - all row items share one computed height
   - widths vary by aspect ratio (set via JS flex-basis)
   - media is always fully visible (contain, never cover) */
section[name="mustang page animation section"] .vkGrid .vkRow .media-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
}

section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .playbtn-host,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .playbtn-host > .dynamic-video-controls-wrap > video,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap > video {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
}

section[name="mustang page animation section"] .vkGrid .vkRow .media-row > * {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
}

section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap {
    display: block !important;
    overflow: hidden;
}

section[name="mustang page animation section"] .vkGrid .vkRow .media-row > picture,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .playbtn-host,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap {
    overflow: hidden;
}

section[name="mustang page animation section"] .vkGrid .vkRow .media-row > picture > img,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > video,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > img,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .playbtn-host > video,
section[name="mustang page animation section"] .vkGrid .vkRow .media-row > .dynamic-video-controls-wrap > video {
    display: block !important;
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    background: #000;
}