<div class="iconList">
    <div class="iconList__header">
        <h3 class="iconList__heading">Icon w/ text listing item</h3>
        <p class="iconList__subheading">Optional subheading</p>
    </div>

    <ul class="iconList__list">
        <li class="iconList__item">
            <svg class="icon iconList__icon -circle -light accent-secondary" role="presentation">
                <use href="/main-icons-sprite.svg#check" />
            </svg>
            <div class="iconList__content">
                <p class="iconList__description">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
            </div>
        </li>
        <li class="iconList__item">
            <svg class="icon iconList__icon -circle -light accent-secondary" role="presentation">
                <use href="/main-icons-sprite.svg#info" />
            </svg>
            <div class="iconList__content">
                <p class="iconList__title">Here's an optional title</p>
                <p class="iconList__description">
                    Lorem ipsum dolor sit, amet consectetur <a href="#" class="-wide accent-primary">Repellendus, doloremque</a>, adipisicing elit. 
                </p>
            </div>
        </li>
    </ul>
</div>

.iconList {
  display: grid;
  gap: 1.5rem;
  color: var(--root-color);

  &__header {
    display: grid;
    gap: 0.25rem;
  }

  &__heading {
    margin: 0;
    font-size: var(--root-font-size-h4);
    font-weight: 700;
    color: var(--root-color-headings);
  }

  &__subheading {
    margin: 0;
    color: var(--color-gray-600);
  }

  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
  }

  &__item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
  }

  &__icon.icon {
    height: 2.5rem;
    width: 2.5rem;
    align-self: start;
    padding: 0.65rem;
  }

  &__content {
    display: grid;
    gap: 0.25rem;
  }

  &__title {
    margin: 0;
    font-weight: 700;
    color: var(--root-color-headings);
    line-height: 1.2;
  }

  &__description {
    margin: 0;
    color: var(--color-gray-600);
    line-height: 1.4;
    font-size: .875rem;
  }
}