/* Б-32 Логотипы и письма. Источник: новый макет (задача 6.3) */

.b-clients {
  padding-block: var(--space-section);
  background: var(--color-bg);
}

.b-clients__logos {
  display: grid;
  grid-auto-columns: 10rem;
  grid-auto-flow: column;
  gap: var(--space-3);
  margin-inline: calc(-1 * var(--container-pad));
  padding: var(--space-1) var(--container-pad) var(--space-3);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.b-clients__logos:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.b-clients__letters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  max-width: 36rem;
  margin-top: var(--space-6);
  list-style: none;
}

.b-clients__letter {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  transition: transform var(--dur-base) var(--ease-standard);
}

.b-clients__letter:hover {
  transform: translateY(-4px) rotate(-1deg);
}

.b-clients__letter:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.b-clients__letter .c-placeholder {
  aspect-ratio: 210 / 297;
  min-height: 0;
  background-color: var(--color-surface);
}

.b-clients__letter-full {
  aspect-ratio: 210 / 297;
  max-height: 70vh;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .b-clients__logos {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}