body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
  max-height: 100vh;
}

:where(#main) {
  overflow: auto;
  container-type: inline-size;
  inline-size: 100vw;
  margin-inline: auto;
  max-inline-size: 100vw;
  padding-inline: clamp(var(--inline-space), 5%, var(--inline-space-triple));

  @media (max-width: 70ch) {
    inline-size: min(67ch, 100vw);
    padding-inline: var(--inline-space);
  }
}

:where(#footer) {
  grid-area: footer;
  max-inline-size: 100vw;
  view-transition-name: footer;
  background-color: var(--color-bg-secondary);

  > nav {
    padding-inline: var(--inline-space);
    padding-block: var(--block-space);
    view-transition-name: footer-nav;
  }

  > * {
    align-items: center;
    display: flex;
    gap: 5ch;
    justify-content: center;
  }
}

:where(#header) {
  grid-area: header;
  max-inline-size: 100vw;
  view-transition-name: header;
  z-index: 1;
  padding-block: var(--block-space-half);
  padding-inline: var(--inline-space-double);
  background-color: var(--color-bg-secondary);

  > nav {
    view-transition-name: nav;
  }

  > * {
    align-items: center;
    display: flex;
    gap: 1ch;
    justify-content: start;
  }
}