/* make this section scroll underneath the faq */
#faq {
    position:relative;
    z-index:10;
}

#media-animation {
    position:relative;
    margin-top:-100vh; /* negative margin to offset the height of this section */
}

.vii-media-animation-inner {
    --gap:20px;
    --slide-w:910px;
    --slide-ratio:910/510;
    --marquee-w:358px;
    --marquee-ratio:358/202;
}

.vii-media-animation {
    /* container query removed */
}

.vii-media-animation:not(.is-animation-completed) .vii-btn-play {
    opacity:0;
    transform:scale(1.3);
}

.vii-media-animation .row-1 {
    position:relative;
    z-index:2;
    height:300vh; /* 3x the height of the viewport for sticky length */
}

.vii-media-animation .row-1 .row-sticky {
    position:sticky;
    top:0;
    height:100vh; /* full height of the viewport */
    overflow:hidden;
}

.vii-media-animation .row-1 .vii-media-animation-slider .flickity-viewport {
    overflow:visible;
}

.vii-media-animation .row-1 .vii-media-animation-slider .is-selected {
    z-index:2;
}

.vii-media-animation .row-1 .vii-media-animation-slider .slide-item {
    width:var(--slide-w);
    padding:0 calc(var(--gap) / 2);
}

.vii-media-animation .row-1 .vii-media-animation-slider .slide-item .slide-item-inner {
    display:block;
    aspect-ratio:var(--slide-ratio);
}

.vii-media-animation .row-1 .vii-media-animation-slider .slide-item .slide-item-inner .slide-item-image {
    will-change:transform;
}

.vii-media-animation .row-1 .vii-media-animation-slider .slide-item:not(.is-selected) .vii-btn-play {
    opacity:0;
    transform:scale(1.3);
}

.vii-media-animation .row-2 {
    gap:var(--gap);
}

.vii-media-animation .row-2 .vii-media-animation-marquee {
    gap:var(--gap);
    overflow:hidden;
    font-size:0;
    white-space:nowrap;
}

.vii-media-animation .row-2 .vii-media-animation-marquee .transform-wrapper {
    will-change:transform;
}

.vii-media-animation .row-2 .vii-media-animation-marquee ul {
    display:inline-block;
    white-space:nowrap;
    margin:0;
}

.vii-media-animation .row-2 .vii-media-animation-marquee ul li {
    width:var(--marquee-w);
    display:inline-block;
    margin:0 calc(var(--gap) / 2);
    padding:0;
}

.vii-media-animation .row-2 .vii-media-animation-marquee ul li .slide-item-inner {
    aspect-ratio:var(--marquee-ratio);
    width:100%;
}

.slide-item .is-mobile-image {
    display:none;
}

/* replaced container with normal media */
@media (max-width:1280px) {
    .vii-media-animation-inner {
        --gap:12px;
        --slide-w:700px;
        --marquee-w:260px;
    }
}

@media (max-width:1023px) {
    .vii-media-animation-inner {
        --gap:10px;
        --slide-w:400px;
        --slide-ratio:242/350;
        --marquee-w:260px;
    }
}

@media (max-width:600px) {
    .vii-media-animation-inner {
        --gap:8px;
        --slide-w:310px;
        --marquee-w:210px;
    }

    .vii-media-animation-inner .flickity-button {
        visibility:hidden !important;
    }

    .slide-item .is-mobile-image {
        display:block;
    }

    .slide-item:has(.is-mobile-image) .is-desktop-image {
        display:none;
    }
}

@media (max-width:400px) {
    .vii-media-animation-inner {
        --slide-w:242px;
    }
}

.vii-btn-play {
    width:60px;
    font-size:10px;
}

@media (max-width: 600px) {
    .vii-media-animation {
        margin-bottom:8px !important;
    }
}