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

@keyframes animate {
    20%{
        background-image: url(../images/slider/slide_3.jpg);
        background-size: cover;
    }
    40%{
        background-image: url(../images/slider/slide_2.jpg);
        background-size: cover;
    }
    60%{
        background-image: url(../images/slider/slide_1.jpg);
        background-size: cover;
    }
}
ol, li                                             {list-style: none;margin: 0;padding: 0;overflow:hidden}
.carousel                                          {position: relative;padding-top: 75%;filter: drop-shadow(0 0 10px #0003);perspective: 100px;max-height:128x;overflow:hidden}
.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}
 .carousel__slide                                  {position: relative;flex: 0 0 100%;width: 50%;background-color: #ffffff;counter-increment: item;max-height:300px}
 .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: 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__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:relative;top:-420px;text-align:center}
.carousel__navigation-list,
.carousel__navigation-item                         {display: inline-block}
.carousel__navigation-button                       {display: inline-block;width: 0.7rem;height: 0.7rem;background-color: #ffffff;background-clip: content-box;border: 0.25rem solid transparent;border-radius: 50%;font-size: 0;transition: transform 0.1s}
.carousel__navigation-button:hover                 {background-color: #f8d664}