.marquee {
  overflow: hidden;
  white-space: nowrap;
  background-color: rgba(var(--color-background));
}

.marquee__track {
  display: inline-flex;
  width: max-content;
  animation: marquee-scroll var(--marquee-speed, 26s) linear infinite;
}

.marquee__group {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: rgba(var(--color-light-text));
  padding-inline-end: 24px;
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}