.marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--spacing);
  align-items: stretch;
}

.marquee-track.to-left {
  animation: scroll-left 60s linear infinite;
}

.marquee-track.to-right {
  animation: scroll-right 60s linear infinite;
}

.marquee-track .marquee-item {
  flex: 0 0 auto;
  height: auto;
}

.marquee-item > * {
  height: 100%;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}