/* Dedicated final layer for the nine-category logo rails. */
.brands .brand-atlas {
  display: block !important;
  width: 100% !important;
  margin-top: 34px !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(18, 31, 39, 0.14) !important;
  border-bottom: 1px solid rgba(18, 31, 39, 0.14) !important;
  background: rgba(250, 252, 251, 0.56) !important;
}

.brands .brand-atlas-row {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(18, 31, 39, 0.12) !important;
}

.brands .brand-atlas-row:last-child { border-bottom: 0 !important; }

.brands .brand-atlas-track,
.brands .brand-atlas-run {
  display: flex !important;
  flex: 0 0 auto !important;
  width: max-content !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.brands .brand-atlas-track {
  will-change: transform !important;
  animation: truepath-brand-atlas-forward var(--atlas-pace, 52s) linear infinite !important;
}

.brands .brand-atlas-row.is-reverse .brand-atlas-track { animation-name: truepath-brand-atlas-reverse !important; }

.brands .brand-atlas:hover .brand-atlas-track,
.brands .brand-atlas.is-motion-paused .brand-atlas-track { animation-play-state: paused !important; }

.brands .brand-atlas-item,
.brands .brand-atlas-item:nth-child(3n),
.brands .brand-atlas-item:nth-child(5n),
.brands .brand-atlas-row:nth-child(2) .brand-atlas-item {
  display: grid !important;
  flex: 0 0 var(--atlas-item-width, 224px) !important;
  width: var(--atlas-item-width, 224px) !important;
  height: 112px !important;
  margin: 0 !important;
  padding: 24px 26px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-right: 1px solid rgba(18, 31, 39, 0.12) !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.brands .brand-atlas-item img,
.brands .brand-atlas-item img.is-wide,
.brands .brand-atlas-item img.is-mark,
.brands .brand-atlas-item img.is-compact,
.brands .brand-atlas-item img.is-dark {
  display: block !important;
  width: 154px !important;
  height: 48px !important;
  max-width: 154px !important;
  max-height: 48px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: scale(var(--brand-optical-scale, 1)) !important;
  transform-origin: center !important;
}

.brands .brand-atlas-item img.is-mark {
  width: 58px !important;
  height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
}

.brands .brand-atlas-item img.is-light-logo { filter: brightness(0) saturate(100%) contrast(1.15) !important; }

@keyframes truepath-brand-atlas-forward {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes truepath-brand-atlas-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 900px) {
  .brands .brand-atlas-item,
  .brands .brand-atlas-item:nth-child(3n),
  .brands .brand-atlas-item:nth-child(5n),
  .brands .brand-atlas-row:nth-child(2) .brand-atlas-item {
    height: 98px !important;
    padding: 20px 22px !important;
  }
}

@media (max-width: 620px) {
  .brands .brand-atlas { margin-top: 28px !important; }

  .brands .brand-atlas-item,
  .brands .brand-atlas-item:nth-child(3n),
  .brands .brand-atlas-item:nth-child(5n),
  .brands .brand-atlas-row:nth-child(2) .brand-atlas-item {
    height: 88px !important;
    padding: 18px !important;
  }

  .brands .brand-atlas-item img,
  .brands .brand-atlas-item img.is-wide,
  .brands .brand-atlas-item img.is-mark,
  .brands .brand-atlas-item img.is-compact,
  .brands .brand-atlas-item img.is-dark {
    width: 132px !important;
    height: 42px !important;
    max-width: 132px !important;
    max-height: 42px !important;
  }

  .brands .brand-atlas-item img.is-mark {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brands .brand-atlas-track { animation: none !important; }
}

/* The two site-wide marquees stay deliberately quieter than the category atlas. */
.hero-logo-run-cell,
.logo-run-cell {
  flex: 0 0 192px !important;
  width: 192px !important;
  height: 110px !important;
  padding: 0 24px !important;
}

.hero-logo-run-cell img,
.logo-run-cell img,
.hero-logo-run img,
.logo-run img,
.brands-stage .logo-run img,
.brands-stage .hero-logo-run img {
  width: 126px !important;
  height: 42px !important;
  max-width: 126px !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  .hero-logo-run-cell,
  .logo-run-cell {
    flex-basis: 164px !important;
    width: 164px !important;
    height: 96px !important;
    padding: 0 18px !important;
  }

  .hero-logo-run-cell img,
  .logo-run-cell img,
  .hero-logo-run img,
  .logo-run img,
  .brands-stage .logo-run img,
  .brands-stage .hero-logo-run img {
    width: 108px !important;
    height: 36px !important;
    max-width: 108px !important;
    max-height: 36px !important;
  }
}

@media (max-width: 620px) {
  .hero-logo-run-cell,
  .logo-run-cell {
    flex-basis: 148px !important;
    width: 148px !important;
    height: 88px !important;
    padding: 0 16px !important;
  }

  .hero-logo-run-cell img,
  .logo-run-cell img,
  .hero-logo-run img,
  .logo-run img,
  .brands-stage .logo-run img,
  .brands-stage .hero-logo-run img {
    width: 100px !important;
    height: 34px !important;
    max-width: 100px !important;
    max-height: 34px !important;
  }
}