/* Two identical halves move by -50% for a seamless loop. Use margins, not a gap between the halves. */
.marquee__slider { overflow: hidden; }

.bf-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  align-items: center;
  will-change: transform;
  animation: bf-marquee var(--bf-marquee-dur, 40s) linear infinite;
}

.bf-marquee-track { --bf-marquee-gap: 16px; }
@media (min-width: 768px) { .bf-marquee-track { --bf-marquee-gap: 30px; } }
@media (min-width: 981px) { .bf-marquee-track { --bf-marquee-gap: 90px; } }

.bf-marquee-track .marquee__slide {
  flex: 0 0 auto;
  margin-right: var(--bf-marquee-gap);
}

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

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