[data-media-carousel] {
    position: relative;
    touch-action: pan-y;
    user-select: none;
}

[data-media-carousel] [data-media-carousel-track] {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    width: calc(var(--media-carousel-count, 1) * 100%);
    height: 100%;
    transform: translateX(0);
    transition: transform 300ms ease;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
}

[data-media-carousel] [data-media-carousel-track].is-active {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
}

[data-media-carousel] [data-media-carousel-track].is-outgoing {
    z-index: 2;
    opacity: 1;
}

[data-media-carousel-slide] {
    position: relative;
    flex: 0 0 calc(100% / var(--media-carousel-count, 1));
    width: calc(100% / var(--media-carousel-count, 1));
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    [data-media-carousel-track] {
        transition-duration: 1ms;
    }
}