.scroller{max-height:600px}.scroller__inner{padding-block:1rem;display:flex;flex-direction:column;flex-wrap:nowrap;width:auto;gap:1rem;animation:scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite;animation-play-state:running}.scroller[data-animated=true]{overflow-y:hidden;-webkit-mask:linear-gradient(180deg,transparent,white 20%,white 80%,transparent);mask:linear-gradient(180deg,transparent,white 20%,white 80%,transparent)}.scroller[data-animated=true] .scroller__inner{animation:scroll var(--_animation-duration,40s) var(--_animation-direction,forwards) linear infinite}.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}.scroller:hover .scroller__inner{animation-play-state:paused}@keyframes scroll{to{transform:translateY(calc(-50% - .1rem))}}