body {
  --sidebar-width: 0vw;

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr var(--sidebar-width);

  grid-template-areas:
    "header sidebar"
    "main sidebar"
    "footer sidebar";

  &.sidebar {
    @media (min-width: 100ch) {
      --sidebar-width: 20vw;
    }
  }
}

#header {
  grid-area: header;
  background: var(--color-bg-secondary);
}

#main {
  grid-area: main;
  container-type: inline-size;
  inline-size: min(120ch, 80vw);
  margin-inline: auto;
  max-inline-size: 97vw;
  padding-block-end: clamp(
    var(--block-space),
    5%,
    calc(var(--block-space) * 3)
  );
  padding-inline: clamp(var(--inline-space), 5%, calc(var(--inline-space) * 3));

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

#sidebar {
  grid-area: sidebar;
  position: relative;
  transition: transform 300ms ease;
  background-color: hsla(var(--hsl-crust), 0.66);

  .sidebar & {
    -webkit-backdrop-filter: blur(66px);
    backdrop-filter: blur(66px);
    block-size: 100dvh;
    max-block-size: 100dvh;
    z-index: 3;

    @media (max-width: 100ch) {
      inset: 0;
      position: fixed;
      transform: translate(100%);
    }
  }

  &.open {
    @media (max-width: 100ch) {
      transform: translate(0);
    }
  }
}

#footer {
  grid-area: footer;
}