.logo-strip { border-top: 1px solid var(--line-on-dark); padding: 30px 0 34px; }
.logo-strip .wrap { position: relative; display: flex; align-items: center; gap: 40px; }
.logo-strip p { flex: none; font-size: 14px; color: var(--muted-on-dark); }
.logo-row { flex: 1; min-width: 0; }
.logo-track { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.logo-track img { height: 28px; width: auto; opacity: .82; }
.logo-track img.tall { height: 34px; }
.logo-track .duplicate { display: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - 18px)); } }

/* The label and all seven logos need about 1234 px side by side, so below that the label goes on top */
@media (max-width: 1240px) {
  .logo-strip .wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .logo-row { width: 100%; }
}
/* Below about 1000 px the seven logos no longer fit in one row, so they scroll past */
@media (max-width: 1023px) {
  .logo-row { overflow: hidden; margin: 0 calc(-1 * var(--gutter)); width: auto; align-self: stretch; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .logo-track { width: max-content; justify-content: flex-start; gap: 36px; animation: marquee 32s linear infinite; }
  .logo-track .duplicate { display: block; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .logo-track { width: auto; flex-wrap: wrap; justify-content: center; gap: 20px 28px; padding: 0 var(--gutter); }
  .logo-track .duplicate { display: none; }
  .logo-row { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 720px) {
  .logo-strip { padding: 24px 0 26px; }
  .logo-track img { height: 24px; }
  .logo-track img.tall { height: 30px; }
}

/* The lens: logo-strip.js runs the seven past it, slower under the lens, bigger inside it and named beneath */
.logo-strip.is-lens .logo-row { position: relative; height: 104px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.logo-strip.is-lens .logo-track { position: absolute; left: 0; top: 0; height: 72px; width: max-content; justify-content: flex-start; gap: 48px; animation: none; will-change: transform; }
.logo-strip.is-lens .logo-track img { flex: none; opacity: .6; }
.logo-strip.is-lens .logo-track .duplicate { display: block; }
.logo-lens { position: absolute; left: 50%; top: 0; width: 216px; height: 72px; margin-left: -108px; border: 1.5px solid rgba(255, 77, 134, .75); border-radius: 16px; background: rgba(255, 255, 255, .05); }
.logo-name { position: absolute; left: 0; right: 0; top: 82px; text-align: center; font: 700 14px/1.2 var(--font-heading); letter-spacing: -0.005em; white-space: nowrap; color: #fff; }
/* Side by side, the label lines up with the logos rather than with the name under them */
@media (min-width: 1241px) {
  .logo-strip.is-lens .wrap > p { align-self: flex-start; margin-top: 26px; }
}
/* Stacked, the row takes its own height: everything in it is positioned, so a flex basis of 0 would fold it away */
@media (max-width: 1240px) {
  .logo-strip.is-lens .logo-row { flex: none; }
}
@media (max-width: 1023px) {
  .logo-strip.is-lens .logo-row { margin: 0 calc(-1 * var(--gutter)); }
}
@media (max-width: 720px) {
  .logo-strip.is-lens .logo-row { height: 96px; }
  .logo-strip.is-lens .logo-track { height: 64px; gap: 40px; }
  .logo-lens { width: 184px; height: 64px; margin-left: -92px; border-radius: 14px; }
  .logo-name { top: 74px; font-size: 13px; }
}