.kw-media-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    width: 100%;
    height: 100%;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.style-dark .kw-media-wrapper {
    background-color: var(--style-dark-bg);
}
.kw-media{
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    width: 100%;
    height: 100%;
    top:50%;
    left:50%;;
    transform: translate(-50%, calc(-50% + 100px)) scale(1.05);
    filter: blur(10px);
    opacity: 0;
    will-change: transform, filter, opactiy;
    transition: 
        transform var(--anim-duration) var(--anim-easing) 0.2s,
        filter var(--anim-duration) var(--anim-easing) 0.2s,
        opacity var(--anim-duration) var(--anim-easing) 0.2s;
}
.is-loaded .kw-media {
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0px);
    opacity: 1;
}

.gallery-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    /* Default fade out transition */
    transition: opacity 2s ease-in-out, z-index 0s 2s, transform 2s ease-in-out 0s; 
    pointer-events: none;
    width: 100%;
    height: 100%;
    transform: scale(1);
}

.gallery-item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.contain .gallery-item {
    transform: scale(0.85);
}
.contain .gallery-item img {
    object-fit: contain;
}

/* 1. The state of the image that just finished being active */
/* .gallery-item {
    z-index: 2;
    opacity: 0;
    transition: opacity 2s ease-in-out;
} */

.gallery-item.is-last {
    transform: scale(1.15); /* Keep it zoomed while fading out */
    opacity: 0;
    transition: transform 0s 2s, opacity 0s 2s; /* Snap back to 1 only after fade finishes */
}
.contain .gallery-item.is-last {
    transform: scale(1);
}

/* 2. The state of the current active image */
.gallery-item.is-active {
    opacity: 1;
    z-index: 3;
    transition: opacity 2s ease-in-out, transform 8s linear;
    transform: scale(1.15);
}
.contain .gallery-item.is-active {
    transform: scale(1);
    transition: transform 8s linear;
}

/* Video Fit */
.hero-video iframe, 
.hero-video video {
    width: 100vw;
    height: 56.25vw; /* 16:9 ratio */
    min-height: 100vh;
    min-width: 177.77vh; /* 16:9 ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}