/* Purpose: Client logo wall on the dark band. */

.clients {
  background: var(--color-navy);
}

.clients__title {
  color: var(--color-on-dark);
}

.clients .kicker {
  color: var(--color-text-faint);
}

.clients .lead {
  color: var(--color-on-dark-soft);
}

.clients__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-26);
}

.clients__logo {
  flex: 0 0 calc((100% - 26px) / 2);
  display: grid;
  place-items: center;
  min-height: 72px;
  transition: transform var(--duration-base) var(--ease-smooth);
}

.clients__logo img {
  max-width: 100%;
  max-height: 58px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity var(--duration-base) ease;
}

.clients__logo:hover {
  transform: translateY(-4px);
}

.clients__logo:hover img {
  opacity: 1;
}

@media (min-width: 561px) {
  .clients__grid {
    gap: var(--space-30) var(--space-36);
  }

  .clients__logo {
    flex: 0 0 calc((100% - 3 * 36px) / 4);
    min-height: 92px;
  }

  .clients__logo img {
    max-height: 74px;
  }
}

@media (min-width: 821px) {
  .clients__grid {
    gap: var(--space-34) var(--space-40);
  }

  .clients__logo {
    flex: 0 0 calc((100% - 5 * 40px) / 6);
  }
}