<section class="section editorialSplit -introBody">
  <div class="container">
    <div class="editorialSplit__grid grid -columns-12">
      <div class="editorialSplit__aside">
        <p class="editorialSplit__introText">
          Asymmetric intro and body. Narrow intro column beside wider body copy. Uses <code>editorialSplit</code> with <code>-introBody</code>; aside and main stack on small screens.
        </p>
      </div>
      <div class="editorialSplit__main">
        <div class="editorialSplit__body">
          <p>
            Praesent quis est dapibus, pretium mi at, cursus tellus. In eleifend, quam efficitur dapibus fermentum, odio eros scelerisque felis, sit amet posuere lectus ante vitae mauris. Nam ullamcorper lobortis libero et laoreet. Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat. Vestibulum luctus lacus in justo ultrices, sed egestas orci ornare.
          </p>
          <p>
            Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent quis est dapibus, pretium mi at, cursus tellus.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section editorialSplit -headline">
  <div class="container">
    <div class="editorialSplit__grid grid -columns-12">
      <div class="editorialSplit__aside">
        <p class="editorialSplit__lede">
          Nunc lorem erat, molestie vel turpis eget, vehicula cursus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dignissim urna quam, eu sollicitudin.
        </p>
      </div>
      <div class="editorialSplit__spacer" aria-hidden="true"></div>
      <div class="editorialSplit__main">
        <h2 class="h2 editorialSplit__headline">
          Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat, vestibulum luctus lacus in justo ultrices; dolorem ipsum.
        </h2>
      </div>
    </div>
  </div>
</section>

<section class="section editorialSplit -withCards">
  <div class="container">
    <div class="editorialSplit__grid grid -columns-12">
      <div class="editorialSplit__aside -stickyAside">
        <div>
          <h3 class="h3">editorialSplit -withCards</h3>
          <p class="editorialSplit__lede">
            Turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.
          </p>
        </div>
        <a class="button accent-primary" href="#">Default Button</a>
      </div>
      <div class="editorialSplit__main">
        <div class="cardList">
          <article class="card -horizontal">
            <h4 class="h4 card__title">Convallis ante</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">Convallis ante</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">Convallis ante</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">Convallis ante</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>
      </div>
    </div>
  </div>
</section>

<section class="section editorialSplit -withCards">
  <div class="container">
    <div class="editorialSplit__grid grid -columns-12">
      <div class="editorialSplit__aside">
        <div>
          <h3 class="h3">editorialSplit -withCards</h3>
          <p class="editorialSplit__lede">
            Turpis eget, vehicula cursus leo ad litora torquent per conubia nostra, per inceptos himenaeos.
          </p>
        </div>
        <a class="button accent-primary" href="#">Default Button</a>
      </div>
      <div class="editorialSplit__main">
        <div class="cardList">
          <article class="card -horizontal">
            <h4 class="h4 card__title">Convallis ante</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">Convallis ante</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">Convallis ante</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">Convallis ante</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>
      </div>
    </div>
  </div>
</section>

@use '@/core' as *;

.editorialSplit {
  &__grid {
    min-width: 0;

    > .editorialSplit__main,
    > .editorialSplit__aside,
    > .editorialSplit__spacer {
      grid-column: 1 / -1;

      @include at(lg) {
        grid-column: span var(--cell-span);
      }
    }
  }

  &.-introBody &__aside {
    @include at(lg) {
      --cell-span: 5;
    }
  }

  &.-introBody &__main {
    @include at(lg) {
      --cell-span: 7;
    }
  }

  &.-headline &__aside {
    @include at(lg) {
      --cell-span: 3;
    }
  }

  &.-headline &__spacer {
    display: none;

    @include at(md) {
      display: block;
    }

    @include at(lg) {
      --cell-span: 1;
    }
  }

  &.-headline &__main {
    @include at(lg) {
      --cell-span: 8;
    }
  }

  &.-withCards &__main {
    @include at(lg) {
      --cell-span: 9;
    }
  }

  &__aside {
    min-width: 0;

    &.-stickyAside {
      @include at(lg) {
        align-self: start;
        position: sticky;
        top: 2rem;
      }
    }
  }

  &__main {
    min-width: 0;
  }

  &__introText {
    color: var(--color-gray-500);
    font-size: var(--root-font-size-lg);
    line-height: 1.5;
    margin: 0;
  }

  &__body {
    color: var(--color-gray-600);
  }

  &__lede {
    color: var(--color-gray-600);
    font-size: var(--root-font-size-sm);
    line-height: 1.5;
    margin: 0;
  }

  &__headline {
    font-size: var(--root-font-size-h2);
    margin: 0;
    max-width: var(--root-prose-wide-max);

    @include at(md) {
      font-size: var(--root-font-size-h1);
    }
  }

  &.-withCards {
    --accent-color: var(--color-gray-50);

    background: var(--color-gray-50);
    color: var(--root-color);
    padding-block: 4rem;
  }

  &.-withCards &__aside {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    @include at(lg) {
      --cell-span: 3;
    }
  }
}