@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}}ol,li{list-style:none;margin:0;padding:0}.carousel{position:relative;padding-top:75%;filter:drop-shadow(0 0 10px #0003);perspective:100px}.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:100%;background-color:#fff;counter-increment:item}.carousel__slide:nth-child(even){background-color:#fff}.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:absolute;right:0;bottom:0;left:0;text-align:center}.carousel__navigation-list,.carousel__navigation-item{display:inline-block}