.brands-marquee {
  --brands-duration: 34s;
  --brands-gap: clamp(42px, 4vw, 58px);
  padding: clamp(24px, 3vw, 42px) 0 clamp(68px, 7vw, 96px);
  overflow: hidden;
  background: var(--jaroni-white);
}
.brands-marquee__header {
  max-width: 760px;
  margin: 0 auto clamp(34px, 4vw, 48px);
  text-align: center;
}
.brands-marquee__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-10);
  color: var(--color-green-readable);
  font-size: var(--text-section-eyebrow);
  font-weight: var(--font-extrabold);
  letter-spacing: .12em;
  line-height: 1.15;
  text-transform: uppercase;
}
.brands-marquee__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-section-title);
  font-weight: var(--font-extrabold);
  letter-spacing: -.04em;
  line-height: 1.12;
}
.brands-marquee__lead {
  margin: var(--space-7) 0 0;
  color: var(--color-text-secondary);
  font-size: .94rem;
  line-height: 1.55;
}
.brands-marquee__status {
  margin: 0;
  color: var(--color-text-status);
  font-size: var(--text-86);
  text-align: center;
}
.brands-marquee__status[hidden] { display: none; }
.brands-marquee__viewport {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  touch-action: pan-y;
}
.brands-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: brands-marquee-scroll var(--brands-duration) linear infinite;
}
.brands-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--brands-gap);
  padding-right: var(--brands-gap);
}
.brands-marquee__item {
  position: relative;
  display: grid;
  flex: 0 0 clamp(145px, 11vw, 180px);
  place-items: center;
  width: clamp(145px, 11vw, 180px);
  height: clamp(72px, 6vw, 90px);
  color: #27332d;
  filter: grayscale(.18) contrast(.94);
}
.brands-marquee__logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(60px, 5vw, 78px);
  object-fit: contain;
  opacity: 0;
}
.brands-marquee__placeholder {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #334039;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: var(--font-weight-850);
  letter-spacing: -.035em;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.brands-marquee__item.is-loaded .brands-marquee__logo { opacity: 1; }
.brands-marquee__item.is-loaded .brands-marquee__placeholder { display: none; }

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

@media (max-width: 1100px) {
  .brands-marquee {
    --brands-duration: 31s;
    --brands-gap: 38px;
  }
  .brands-marquee__item {
    flex-basis: 148px;
    width: 148px;
  }
}

@media (max-width: 640px) {
  .brands-marquee {
    --brands-duration: 28s;
    --brands-gap: 26px;
    padding-top: var(--space-18);
    padding-bottom: var(--space-64);
  }
  .brands-marquee__header {
    width: min(calc(100% - 28px), var(--container-width));
    margin-bottom: var(--space-30);
  }
  .brands-marquee__lead { font-size: var(--text-85); }
  .brands-marquee__viewport {
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .brands-marquee__item {
    flex-basis: 112px;
    width: 112px;
    height: 68px;
  }
  .brands-marquee__logo { height: 52px; }
  .brands-marquee__placeholder { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brands-marquee__viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }
  .brands-marquee__track {
    animation: none;
    will-change: auto;
  }
  .brands-marquee__group[aria-hidden="true"] { display: none; }
}