@keyframes toNext {
    75% {
        left: 0;
    }
    95% {
        left: 100%;
    }
    98% {
        left: 100%;
    }
    99% {
        left: 0;
    }
}
@keyframes toStart9 {
    75% {
        left: 0;
    }
    95% {
        left: -800%;
    }
    98% {
        left: -800%;
    }
    99% {
        left: 0;
    }
}

@keyframes toStart8 {
    75% {
        left: 0;
    }
    95% {
        left: -700%;
    }
    98% {
        left: -700%;
    }
    99% {
        left: 0;
    }
}

@keyframes toStart7 {
    75% {
        left: 0;
    }
    95% {
        left: -600%;
    }
    98% {
        left: -600%;
    }
    99% {
        left: 0;
    }
}

@keyframes toStart6 {
    75% {
        left: 0;
    }
    95% {
        left: -500%;
    }
    98% {
        left: -500%;
    }
    99% {
        left: 0;
    }
}

@keyframes toStart5 {
    75% {
        left: 0;
    }
    95% {
        left: -400%;
    }
    98% {
        left: -400%;
    }
    99% {
        left: 0;
    }
}

@keyframes toStartfhzg {
    75% {
        left: 0;
    }
    95% {
        left: -4000%;
    }
    98% {
        left: -4000%;
    }
    99% {
        left: 0;
    }
}

@keyframes toStart {
    75% {
        left: 0;
    }
    95% {
        left: -200%;
    }
    98% {
        left: -200%;
    }
    99% {
        left: 0;
    }
}

@keyframes snap {
    96% {
        scroll-snap-align: center;
    }
    97% {
        scroll-snap-align: none;
    }
    99% {
        scroll-snap-align: none;
    }
    100% {
        scroll-snap-align: center;
    }
}

ol, li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.carousel {
    position: relative;
    height: 100%;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px;
}

.carousel__viewport::-webkit-scrollbar {
    width: 0;
}

.carousel__viewport::-webkit-scrollbar-track {
    background: transparent;
}

.carousel__viewport::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
}

.carousel__viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: overlay;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.carousel__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    counter-increment: item;
    background-repeat: no-repeat;
    background-size: cover;
}
.carousel__slide.bg-no-cover {
    background-size: initial;
}

.carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
}

/*@media (hover: hover) {*/
    .carousel__snapper {
        animation-name: toNext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }

    .carousel__snapper-delay-3 {
        animation-delay: 3s;
    }

    .carousel__snapper-delay-5 {
        animation-delay: 5s;
    }

    .carousel__snapper-delay-7 {
        animation-delay: 7s;
    }

    .carousel__slide:last-child .carousel__snapper {
        animation-name: toStart, snap;
    }

    .carousel__slide:last-child .carousel__snapper-5 {
        animation-name: toStart5, snap;
    }

    .carousel__slide:last-child .carousel__snapper-6 {
        animation-name: toStart6, snap;
    }

    .carousel__slide:last-child .carousel__snapper-7 {
        animation-name: toStart7, snap;
    }

    .carousel__slide:last-child .carousel__snapper-8 {
        animation-name: toStart8, snap;
    }

    .carousel__slide:last-child .carousel__snapper-9 {
        animation-name: toStart9, snap;
    }

.carousel__slide:last-child .carousel__snapper-fhzg {
    animation-name: toStartfhzg, snap;
}
/*}*/

@media (prefers-reduced-motion: reduce) {
    .carousel__snapper {
        animation-name: none;
    }
}