.sectionLayout {
  --section-inline-start: var(--gutter2);
  --section-inline-end: var(--gutter2);
  scroll-margin-top: calc(var(--header-height, 5em) + 1rem);

  &.padNone {
    --section-inline-start: 0;
    --section-inline-end: 0;
  }

  &.padGutter {
    --section-inline-start: var(--gutter);
    --section-inline-end: var(--gutter);
  }

  &.padGutter2 {
    --section-inline-start: var(--gutter2);
    --section-inline-end: var(--gutter2);
  }

  &.padGutter2Center {
    --section-inline-start: var(--gutter2);
    --section-inline-end: var(--gutter2);
  }

  &.padInner {
    --section-inline-start: var(--inner-start);
    --section-inline-end: var(--inner-start);
  }

  &.padInnerOver {
    --section-inline-start: var(--inner-start);
    --section-inline-end: var(--gutter2);
  }

  > .sectionLayout__content {
    display: grid;
    grid-template-columns: var(--chapter-w) minmax(0, 1fr);
    column-gap: var(--chapter-gap);

    > .chapter {
      grid-column: 1;
    }

    > :not(.chapter) {
      grid-column: 2;
      min-width: 0;
    }

    &.isPlain {
      display: block;
    }

    &.chapterSticky > .chapter {
      position: sticky;
      top: calc(var(--header-height, 5em) + 3.5rem);
      align-self: start;
      padding-inline-start: .25rem;
    }
  }

  .sectionLayout__split {
    display: grid;
    grid-template-columns: clamp(25em, 25vw, 30em) minmax(0, 1fr);
    gap: 0;

    > .sectionLayout__header {
      grid-column: 1;
      min-width: 0;
      align-self: start;

      > hgroup {
        margin: 0;
      }
    }

    > .sectionLayout__main {
      grid-column: 2;
      min-width: 0;
    }

    &.noHeader > .sectionLayout__main {
      grid-column: 1 / -1;
    }
  }

  &.stack .sectionLayout__split {
    grid-template-columns: minmax(0, 1fr);

    > .sectionLayout__header,
    > .sectionLayout__main {
      grid-column: 1;
    }
  }

  @media screen and (min-width: 1025px) {
    &.padGutter2Center.hasLayoutIndent {
      --section-inline-end: var(--indent-start);
    }
  }

  @media screen and (max-width: 1024px) {

    &.padGutter,
    &.padGutter2,
    &.padGutter2Center,
    &.padInnerOver {
      --section-inline-start: var(--inner-start);
      --section-inline-end: var(--inner-start);
    }

    > .sectionLayout__content {
      column-gap: var(--chapter-gap);
    }

    .sectionLayout__split {
      grid-template-columns: minmax(0, 1fr);

      > .sectionLayout__header,
      > .sectionLayout__main {
        grid-column: 1;
      }
    }
  }
}