⛶
logoCloud.html
<section class="section logoCloud">
  <div class="container">
    <h2 class="logoCloud__title">Logo Cloud Section Title</h2>
    <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p>
  </div>

  <div class="logoGrid">
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
  </div>
</section>

<section class="section logoCloud -center">
  <div class="container">
    <h2 class="logoCloud__title">Logo Cloud Section Title .-center</h2>
    <p class="logoCloud__description">A short intro or description can live here to add context before the logos.</p>
  </div>

  <div class="logoGrid">
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
    <div class="logoGrid__item">
      <img class="logoGrid__img" alt="Logo Name" src="https://placehold.co/260x150/9933ff/FFF?text=logo" />
    </div>
  </div>
</section>

<section class="section logoCloud -reduced">
  <div class="container">
    <h2 class="logoCloud__title">Logo Cloud with Links</h2>
  </div>
  <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>
    <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>
    <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>
</section>
index.scss
@use '@/core' as *;

.logoCloud {
  $b: &;

  .container {
    padding-bottom: 2rem;
  }

  &__title {
    margin-bottom: 0;
  }

  &.-reduced {
    .logoGrid__item {
      height: fluid-rems(2, 3);
    }
  }

  &.-center {
    #{$b}__title,
    #{$b}__description {
      text-align: center;
    }
  }
}