<section class="section stackedSplitsSection">
  <div class="container">
    <div class="stackedSplitsSection__container">
      <div class="stackedSplitsSection__split -lead -alignEnd">
        <h2 class="h2 stackedSplitsSection__headline">
          Duis tellus ex, rutrum non tortor in, dolor vulputate iaculis est.
        </h2>
        <p class="stackedSplitsSection__intro">
          Quis elementum libero nulla mollis lectus, proin consequat dui nec commodo iaculis magna:
        </p>
      </div>
      <div class="stackedSplitsSection__split">
        <div class="stackedSplitsSection__primary">
          <p>
            Proin consequat dui nec cursus commodo. Proin non magna quam. Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque.
          </p>
          <div class="actions">
            <a class="button accent-primary" href="#">Default Button</a>
            <a class="link" href="#">
              Standalone Text Link
              <svg viewBox="0 0 18 12"><use href="/main-icons-sprite.svg#arrow-right" /></svg>
            </a>
          </div>
        </div>
        <div class="stackedSplitsSection__features">
          <div class="stackedSplitsSection__feature">
            <h4 class="h4 stackedSplitsSection__featureTitle">Integer pulvinar rhoncus neque</h4>
            <p class="stackedSplitsSection__featureText">
              Proin consequat dui nec cursus commodo. Proin non magna quam. Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque.
            </p>
          </div>
          <div class="stackedSplitsSection__feature">
            <h4 class="h4 stackedSplitsSection__featureTitle">Pulvinar rhoncus nec ipsum set adiscipit</h4>
            <p class="stackedSplitsSection__featureText">
              Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque. Proin consequat dui nec cursus commodo. Proin non magna quam.
            </p>
          </div>
          <div class="stackedSplitsSection__feature">
            <h4 class="h4 stackedSplitsSection__featureTitle">Pulvinar rhoncus nec ipsum set adiscipit</h4>
            <p class="stackedSplitsSection__featureText">
              Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque. Proin consequat dui nec cursus commodo. Proin non magna quam.
            </p>
          </div>
          <div class="stackedSplitsSection__feature">
            <h4 class="h4 stackedSplitsSection__featureTitle">Integer pulvinar rhoncus neque</h4>
            <p class="stackedSplitsSection__featureText">
              Proin consequat dui nec cursus commodo. Proin non magna quam. Duis tellus ex, rutrum non tortor in, vulputate iaculis est. Integer pulvinar rhoncus lectus, sed sodales neque.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@use '@/core' as *;

.stackedSplitsSection {
  /*
    Outer `.container` holds the page grid; inner `__container` stacks splits.
  */
  &__container {
    display: grid;
    grid-column: main / main;
    row-gap: 4rem;
  }

  &__split {
    display: grid;
    gap: 1rem;

    /* Primary + features row: two columns from lg only. */
    @include at(md) {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }

    /*
      `-lead`: two columns from `md` (“desktop”) until below `lg`, then single column (`1fr`) from `lg`.
    */
    &.-lead {
      @include at(md) {
        grid-template-columns: 1fr;
      }

      @include at(lg) {
        grid-template-columns: 1fr 1fr;
      }
    }

    &.-alignEnd {
      @include at(md) {
        align-items: end;
      }
    }
  }

  &__headline {
    --accent-color: var(--color-purple);

    color: var(--accent-color-700);
    margin: 0;
    max-width: 32.6875rem;
    font-size: var(--root-font-size-h1);
  }

  &__intro {
    color: var(--color-gray-500);
    font-size: var(--root-font-size-lg);
    line-height: 1.5;
    margin: 0;
    max-width: 39.625rem;
  }

  &__primary {
    align-self: start;
    color: var(--color-gray-600);
    display: grid;
  }

  &__features {
    display: grid;
    gap: 3rem 2rem;
    grid-template-columns: 1fr;

    @include at(lg) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  &__feature {
    display: grid;
    gap: 1rem;
  }

  &__featureTitle {
    margin: 0;
  }

  &__featureText {
    color: var(--color-gray-600);
    font-size: var(--root-font-size-sm);
    margin: 0;
  }
}