@keyframes tonext {
            75% {
                left: 0;
            }

            95% {
                left: 100%;
            }

            98% {
                left: 100%;
            }

            99% {
                left: 0;
            }
        }

        @keyframes tostart {
            75% {
                left: 0;
            }

            95% {
                left: -300%;
            }

            98% {
                left: -300%;
            }

            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;
            }
        }


        * {
            box-sizing: border-box;
            scrollbar-color: transparent transparent;
            /* thumb and track color */
            scrollbar-width: 0px;
        }

        *::-webkit-scrollbar {
            width: 0;
        }

        *::-webkit-scrollbar-track {
            background: transparent;
        }

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

        * {
            -ms-overflow-style: none;
        }

        * {
            border: 0;
        }

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

        .carousel {
            position: relative;
            padding-top: 470px;
            /*filter: drop-shadow(0 0 10px #0003);*/
            perspective: 100px;
            width: 1280px;
        }

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

        .carousel__slide {
            position: relative;
            flex: 0 0 100%;
            width: 1280px;
            /* background-color: #f99; */
            counter-increment: item;
        }

        /* .carousel__slide:nth-child(even) {
            background-color: #99f;
         } */

        /* .carousel__slide:before {
            content: counter(item);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -40%, 70px);
            color: #fff;
            font-size: 2em;
        } */

        .carousel__snapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 1280px;
            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__slide:last-child .carousel__snapper {
                animation-name: tostart, snap;
            }
        }

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

        .carousel:hover .carousel__snapper,
        .carousel:focus-within .carousel__snapper {
            animation-name: none;
        }

        .carousel__navigation {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            text-align: center;
            width: 1280px;
        }

        .carousel__navigation-list,
        .carousel__navigation-item {
            display: inline-block;
        }

        .carousel__navigation-button {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            background-color: #333;
            background-clip: content-box;
            border: 0.25rem solid transparent;
            border-radius: 40%;
            font-size: 0;
            transition: transform 0.2s;
        }

        .carousel::before,
        .carousel::after,
        .carousel__prev,
        .carousel__next {
            position: absolute;
            top: 0;
            margin-top: 200px;
            width: 2rem;
            height: 2rem;
            transform: translateY(-50%);
            border-radius: 30%;
            font-size: 0;
            outline: 0;
        }

        .carousel::before,
        .carousel__prev {
            left: 0.5rem;
        }

        .carousel::after,
        .carousel__next {
            right: 0.5rem;
        }

        /* .carousel::before,
        .carousel::after {
            content: '';
            z-index: 2;
            background-color: #333;
            background-size: 0.75rem 0.75rem;
            background-repeat: no-repeat;
            background-position: center center;
            color: #fff;
            font-size: 2.5rem;
            line-height: 4rem;
            text-align: center;
            pointer-events: none;
        }

        .carousel::before {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
        }

        .carousel::after {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
        } */

        .carousel__slide a {
            position: relative;
            z-index: 1;

        }