marquee{font-size:20px;transition:all .4s;margin:10px 5px}.marquee{position:relative;overflow:hidden;--move-initial:120vw;--move-final:-100%}.marquee[data-direction=right]{--move-initial:-100%;--move-final:200vw}.marquee[data-direction=up]{--move-initial:100%;--move-final:-100%}.marquee[data-direction=down]{--move-initial:-100%;--move-final:100%}.marquee[data-direction=down] .marquee-content,.marquee[data-direction=up] .marquee-content{animation:marquee-vertical 2.5s linear infinite}.marquee-content{width:fit-content;display:flex;position:relative;transform:translate3d(var(--move-initial),0,0);animation:marquee-horizontal 15s linear infinite;animation-play-state:running}.marquee span{font-size:20px;padding:0 2vw}.marquee:hover .marquee-content{animation-play-state:paused}@keyframes marquee-horizontal{0%{transform:translate3d(var(--move-initial),0,0)}100%{transform:translate3d(var(--move-final),0,0)}}@keyframes marquee-vertical{0%{transform:translate3d(0,var(--move-initial),0)}100%{transform:translate3d(0,var(--move-final),0)}}