.scroller{margin:auto;max-width:1200px;overflow:hidden;position:relative}.scroller:after,.scroller:before{bottom:0;content:"";pointer-events:none;position:absolute;top:0;width:80px;z-index:2}.scroller:before{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0));left:0}.scroller:after{background:linear-gradient(270deg,#fff,hsla(0,0%,100%,0));right:0}.scroller-inner{display:flex;flex-wrap:nowrap;gap:1rem;transform:translateZ(0);width:max-content;will-change:transform}.scroller[data-animated=true]{-webkit-mask:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);mask:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);overflow:hidden}.scroller[data-animated=true] .scroller-inner{animation:scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite;backface-visibility:hidden;transform:translateZ(0);will-change:transform}.scroller:not([data-animated=true]) .scroller-inner{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.scroller-inner img{flex:0 0 auto;height:48px;width:auto}.scroller:not([data-animated=true]) img{scroll-snap-align:start}.scroller[data-direction=right]{--_animation-direction:reverse}.scroller[data-direction=left]{--_animation-direction:forwards}.scroller[data-speed=fast]{--_animation-duration:20s}.scroller[data-speed=slow]{--_animation-duration:60s}@keyframes scroll{to{transform:translate(calc(-50% - .5rem))}}