Related Resources

<div class="related-resources">
    <div class="related-resources__inner">
        <h2 class="component-subtitle">RELATED RESOURCES</h2>
        <div class="related-resources__intro">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia eveniet expedita labore, sunt blanditiis perspiciatis?</p>
        </div>

        <div class="related-resources__group">
            <h3 class="related-resources__subtitle">Subcategory</h3>

            <ul class="related-resources__list">
                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="related-resources__group">
            <h3 class="related-resources__subtitle">Subcategory</h3>

            <ul class="related-resources__list">
                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>

                <li class="related-resources__item">
                    <a href="#" class="related-resources__title">Lorem Ipsum</a>
                    <div class="related-resources__desc">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, delectus!</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

.related-resources {
  padding: 2.4rem 0;
  margin-bottom: 4rem;
  background-color: $color-base-grey;
}

.related-resources__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.related-resources__intro {
  margin-bottom: 2.4rem;
}

.related-resources__subtitle {
  @include typeTitle(true);
  margin-top: 0;
}

.related-resources__list {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 1.6rem 3.2rem;
  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-resources__title {
  @include typeBody(true);
}

.related-resources__desc {
  @include typeCaption;
}