:root {
  --gala-marquee-gap: 32px;
}

[data-marquee-text].gala-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--gala-marquee-gap);
  animation-name: gala-marquee-scroll;
  animation-duration: var(--gala-marquee-duration, 22s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.gala-marquee-group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--gala-marquee-gap);
}

.gala-marquee-group > span {
  flex: 0 0 auto;
  padding-left: 0;
  animation: none;
}

@keyframes gala-marquee-scroll {
  to {
    transform: translateX(calc(-1 * var(--gala-marquee-distance)));
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-marquee-text].gala-marquee-track {
    animation: none;
    transform: none;
  }
}