@layer styles {
  .section {
    --section-content-max-width: 60rem;
    --section-space-between: var(--space--medium);

    padding: var(--section-space-between) var(--page-side-padding);
  }

  .section--no-padding-top {
    padding-top: 0;
  }

  .section__content {
    /* Fallback so the class works outside .section too — the variable is
       scoped to .section, and without it max-width resolves to none. */
    max-width: var(--section-content-max-width, 60rem);
    margin-left: auto;
    margin-right: auto;
  }

  /* Stacked, text first, until there is room for the two side by side. The
     shares are fr pairs set by the split modifiers below. */
  .text-with-button {
    --text-share: 7fr;
    --button-share: 3fr;

    display: grid;
    gap: var(--space--medium);
    align-items: center;
  }

  .text-with-button--80-20 {
    --text-share: 4fr;
    --button-share: 1fr;
  }

  .text-with-button--60-40 {
    --text-share: 3fr;
    --button-share: 2fr;
  }

  .text-with-button--50-50 {
    --text-share: 1fr;
    --button-share: 1fr;
  }

  .text-with-button__action {
    justify-self: center;
    text-align: center;
  }

  /* minmax(0, …) lets a column shrink below its content's width, or a long
     word in the text would push the split off its ratio. Only with a button:
     without one the text keeps the whole width. */
  @media (min-width: 48rem) {
    .text-with-button:has(> .text-with-button__action) {
      grid-template-columns:
        minmax(0, var(--text-share))
        minmax(0, var(--button-share));
      grid-template-areas: 'text button';
    }

    .text-with-button--button-left:has(> .text-with-button__action) {
      grid-template-columns:
        minmax(0, var(--button-share))
        minmax(0, var(--text-share));
      grid-template-areas: 'button text';
    }

    /* Scoped like the columns: an area name the grid does not define makes
       an implicit column, and the text would sit in the second of two. */
    .text-with-button:has(> .text-with-button__action)
      > .text-with-button__text {
      grid-area: text;
    }

    .text-with-button__action {
      grid-area: button;
    }
  }
}