<h2>Card list</h2>
<p>Vertical stack spacing for multiple cards (used with <code>editorialSplit -withCards</code> and horizontal <code>.card</code> items).</p>
<div class="cardList" style="max-width: 50rem;">
  <article class="card -horizontal">
    <h4 class="h4 card__title">Horizontal card</h4>
    <div class="card__body">
      <div>
        <p>
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.
        </p>
        <p class="card__intro">
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.
        </p>
      </div>
      <a class="card__link" href="#">
        Standalone Text Link
        <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
      </a>
    </div>
  </article>
  <article class="card -horizontal">
    <h4 class="h4 card__title">Horizontal card with longer title text</h4>
    <div class="card__body">
      <div>
        <p>
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.
        </p>
        <p class="card__intro">
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.
        </p>
      </div>
      <a class="card__link" href="#">
        Standalone Text Link
        <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
      </a>
    </div>
  </article>
  <article class="card -horizontal">
    <h4 class="h4 card__title">Another card with a long title</h4>
    <div class="card__body">
      <div>
        <p>
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.
        </p>
        <p class="card__intro">
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo.
        </p>
      </div>
      <a class="card__link" href="#">
        Standalone Text Link
        <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
      </a>
    </div>
  </article>
</div>

.cardList {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}