/*
  Colors
*/
/*
  Width
*/
/*
  Space
*/
/*
	Shadow
*/
.marquee {
  display: none;
  overflow: hidden;
  width: 100%;
  background-color: #95112F;
}
.marquee {
  /* Add when the parent container has inline padding, to bleed the band back to the viewport edges */
}
.marquee__track {
  display: flex;
  width: max-content;
  /* Track holds 6 identical copies, so shifting it by half loops seamlessly */
  animation: marquee-slide 24s linear infinite;
}
.marquee__item {
  padding: 12px 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.marquee {
  /* Without motion nothing scrolls into view, so fall back to a single
     wrapping line: keeps long texts readable instead of clipping them */
}

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

@media only screen and (max-width: 768px) {
  .marquee {
    display: block;
  }
  .marquee.-bleed {
    margin-inline: -24px;
    width: calc(100% + 48px);
    /* Matches the homepage promo's 16px header padding + ~11px title leading below the band */
    margin-block-start: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    justify-content: center;
    animation: none;
    width: 100%;
  }
  .marquee__item {
    white-space: normal;
    text-align: center;
  }
  .marquee__item:not(:first-child) {
    display: none;
  }
}