<ul class="logoGrid">
  <li class="logoGrid__item">
    <a href="#" class="logoGrid__link">
      <span class="srOnly">Logo name</span>
    </a>
    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
  </li>
  <li class="logoGrid__item">
    <a href="#" class="logoGrid__link">
      <span class="srOnly">Logo name</span>
    </a>
    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
  </li>
  <li class="logoGrid__item">
    <a href="#" class="logoGrid__link">
      <span class="srOnly">Logo name</span>
    </a>
    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
  </li>
  <li class="logoGrid__item">
    <a href="#" class="logoGrid__link">
      <span class="srOnly">Logo name</span>
    </a>
    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
  </li>
  <li class="logoGrid__item">
    <a href="#" class="logoGrid__link">
      <span class="srOnly">Logo name</span>
    </a>
    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
  </li>
  <li class="logoGrid__item">
    <a href="#" class="logoGrid__link">
      <span class="srOnly">Logo name</span>
    </a>
    <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
  </li>
</ul>

@use '@/core' as *;

.logoGrid {
  $b: &;

  display: flex;
  flex-flow: row wrap;
  gap: fluid-rems(2, 3);
  justify-content: center;
  align-items: center;
  width: 100%;

  &__item {
    height: fluid-rems(5, 7.5);
    max-width: 230px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__img,
  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
    margin-bottom: 0;
  }

  &__link {
    @include pseudo-link;
  }
}