@layer base {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto 9em;

    &.public,
    &.pub-page {
      grid-template-rows: auto 1fr auto;
    }
  }

  /* Required for the card column page on mobile, but not needed otherwise */
  :where(#global-container) {
    display: contents;
  }

  :where(#header) {
    position: relative;
    z-index: var(--z-nav);
  }

  :where(#main) {
    inline-size: 100dvw;
    margin-inline: auto;
    max-inline-size: 100dvw;
    padding-inline:
      calc(var(--main-padding) + env(safe-area-inset-left))
      calc(var(--main-padding) + env(safe-area-inset-right));
    text-align: center;
  }

  body.fixed-layout {
    @media (min-width: 861px) {
      overflow: hidden;
      block-size: 100dvh;
      grid-template-rows: auto 1fr auto 0;

      #main {
        min-block-size: 0;
        overflow: hidden;
        padding-block-end: 0;
      }

      #footer {
        display: none;
      }
    }
  }

  :where(#footer) {
    max-inline-size: 100dvw;
  }

  :is(#header, #footer) {
    @media print {
      display: none;
    }
  }
}