/* logos */
.logos-heading {
  margin: 0 0 var(--space-l);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.logos-list {
  --logo-height: 4rem;
  /* The logos share the full width of the content. The columns are worked out from how many there are (--logo-cols, in the
     block's markup); each row is as wide as the content, and a last row with fewer logos spreads over it too. */
  --logo-per-row: var(--logo-cols, 4);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The height of the logos is a choice of the block (the wordmarks, with no image, grow with it). A logo is about three times as
   wide as it is tall, so the taller they are, the fewer fit in a row: --logo-cap is the most in a row on a smaller screen. */
[data-size="small"] .logos-list { --logo-height: 2.5rem; }
[data-size="large"] .logos-list { --logo-height: 5.5rem; }
[data-size="xlarge"] .logos-list { --logo-height: 7.5rem; }

@media (max-width: 48rem) {
  .logos-list { --logo-cap: 3; --logo-per-row: min(var(--logo-cols, 4), var(--logo-cap)); }
  [data-size="small"] .logos-list { --logo-cap: 4; }
  [data-size="large"] .logos-list { --logo-cap: 2; }
  [data-size="xlarge"] .logos-list { --logo-cap: 2; }
}

@media (max-width: 30rem) {
  .logos-list { --logo-height: 2.75rem; --logo-cap: 2; }
  [data-size="small"] .logos-list { --logo-height: 2rem; --logo-cap: 3; }
  [data-size="large"] .logos-list { --logo-height: 3.75rem; --logo-cap: 1; }
  [data-size="xlarge"] .logos-list { --logo-height: 5rem; --logo-cap: 1; }
  .logo-item { padding-inline: 0.5rem; }
}

.logo-item {
  display: grid;
  flex: 1 1 calc(100% / var(--logo-per-row));
  min-width: 0;
  place-items: center;
  padding: var(--space-s);
}

.logo-link {
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}

.logo-image {
  width: auto;
  max-width: min(calc(var(--logo-height) * 4), 100%);
  height: var(--logo-height);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity 0.2s var(--ease), filter 0.2s var(--ease);
}

.logo-wordmark {
  color: var(--color-muted);
  font-family: var(--font-heading);
  font-size: calc(var(--logo-height) * 0.5);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.logo-link:hover .logo-image {
  filter: none;
  opacity: 1;
}

.logo-link:hover .logo-wordmark {
  color: var(--color-text);
}

/* Always black and white: pointing at a logo only makes it stronger. */
[data-colors="mono"] .logo-link:hover .logo-image {
  filter: grayscale(1);
}

/* Their own colours. */
[data-colors="color"] .logo-image {
  filter: none;
  opacity: 1;
}

[data-colors="color"] .logo-wordmark {
  color: var(--color-text);
}

.block--grid .logos-list {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
}

.block--grid .logo-item {
  min-height: 7.5rem;
  margin: 0 -1px -1px 0;
  padding: var(--space-m);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}