/* Horizontal scroll marquee */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}

.marquee:hover > .scroll {
  animation-play-state: paused;
}

.scroll {
  animation: scroll 10s linear infinite;
  white-space: nowrap;
  display: flex;
}

/* Vertical scroll marquee */
.track-vertical {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-vertical 20s linear infinite;
  /* manipulate the speed of the marquee by changing "20s" above */
}

@keyframes marquee-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.track-vertical-alt {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-vertical-alt 20s linear infinite;
  /* manipulate the speed of the marquee by changing "20s" above */
}

@keyframes marquee-vertical-alt {
  from { transform: translateY(-50%); }
  to { transform: translateY(0%); }
}