@layer layout {
  html {
    height: 100%;
  }
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  main {
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--space-l);
    flex: 1 0 auto;
    position: relative;
    z-index: var(--z-content);
  }
  main :is(h1, h2, h3, h4, h5, h6, p, section, article)[id] {
    scroll-margin-top: var(--mos-banner-height);
  }
  main p {
    max-width: var(--text-max-width);
  }

}