Related Links List

<div class="related-links-list">
    <h2 class="component-subtitle">RELATED LINKS LIST</h2>
    <div class="related-links-list__intro">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia eveniet expedita labore, sunt blanditiis perspiciatis?</p>
    </div>
    <ul class="related-links-list__list">
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
        <li class="related-links-list__item">
            <a href="#" class="related-links-list__link">Link to resource/ document/ asset</a>
        </li>
    </ul>
</div>

.related-links-list {
  margin-bottom: 4.2rem;
}

.related-links-list__intro {
  margin-bottom: 2.4rem;
}

.related-links-list__list {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;

  @media (min-width: $breakpoint-tablet) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (min-width: $breakpoint-desktop) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.related-links-list__link {
  @include typeBody(true);

  &::after {
    font-family: "FontAwesome";
    content: "\00a0\f178";
    display: inline;
  }
}