marquee {
  font-size: 20px;
  transition: all 0.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="up"] .marquee-content,
.marquee[data-direction="down"] .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); } }