.marquee {
  background-color: var(--color-brand-red);
  height: var(--marquee-height);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}

/* Track is two identical groups; the loop swaps group B into group A's slot. */
.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.marquee__item {
  display: inline-block;
  padding-inline: var(--space-md);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
}

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