:root {
  --logo-wall-gap: var(--gap);
  --logo-wall-logo-padding: 2rem;
  --logo-wall-logo-background-color: var(--color-white);

  @include use-responsive-sizing(--logo-wall-logo-width, (
    xs: 14rem,
    s: 16rem,
    l: 19rem,
  ));
}

.logo-wall {
  display: grid;
  grid-gap: var(--logo-wall-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--logo-wall-logo-width), 1fr));
  inline-size: 100%;
}

.logo-wall__logo {
  align-items: center;
  background-color: var(--logo-wall-logo-background-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--logo-wall-logo-padding);
  transition-property: transform;

  &:any-link:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    transform: scale(1.1);
  }
}

.logo-wall__logo-image {
  aspect-ratio: 3 / 2;
  block-size: auto;
  inline-size: 100%;
  object-fit: contain;
}