@layer composition {
  /* Thanks to Kevin Powell */
  /* https://www.youtube.com/watch?v=c13gpBrnGEw */

  /* c-full-width: 100vi */
  /* c-page: 1440px/90rem */
  /* c-section-content: 1216px/76rem */
  /* c-section-post-content: 720px/45rem */

  /* Composition Layer: General page structure */
  .c-page {
    --padding-inline: 1rem;
    --content-max-width: 80rem;
    row-gap: var(--_row-gap);

    display: grid;
    grid-template-columns:
      [full-width-start] minmax(var(--padding-inline), 1fr)
      [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end]
      minmax(var(--padding-inline), 1fr) [full-width-end];
  }

  /* Child layout zones */
  .c-page > :not(.c-full-width) {
    grid-column: content;
  }

  .c-page > .c-full-width {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
  }

  /* Composition: content container */
  .c-section-content {
    max-inline-size: 76rem;
    margin-inline: auto;
    inline-size: 100%;
  }  
  .c-section-editor-content {
    padding-block-start: clamp(4rem, 8vi, 6rem); /* 96px -> 64px */
    max-inline-size: 45rem;
    margin-inline: auto;
    inline-size: 100%;
  }

} /* end of @layer composition */