.scroller{-webkit-mask:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);mask:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);padding-block:calc(var(--_image-height, 150px)*.4)}.scroller__inner{align-items:center;animation:scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite;display:flex;flex-wrap:nowrap;gap:var(--_image-gap,2rem);width:max-content}.scroller:hover .scroller__inner{animation-play-state:paused}.scroller__item{align-items:center;display:flex;justify-content:center;transition:z-index .3s ease}.scroller__item img{height:var(--_image-height,150px);max-width:400px;object-fit:cover;transform-origin:center center;transition:transform .3s ease,box-shadow .3s ease;width:auto}.scroller__item:hover{position:relative;z-index:10}.scroller__item:hover img{box-shadow:0 10px 30px rgba(0,0,0,.25);transform:scale(1.2)}.scroller[data-direction=right] .scroller__inner{animation-direction:reverse}.scroller[data-speed=fast]{--_animation-duration:45s}.scroller[data-speed=normal]{--_animation-duration:90s}.scroller[data-speed=slow]{--_animation-duration:180s}.scroller.scroller--rounded .scroller__item img{border-radius:12px}@keyframes scroll{to{transform:translateX(-50%)}}