.container {
  position: relative;
  display: grid;
  grid: auto 1fr / 5em 1fr;
  grid-template-areas:
    "top top"
    "nav content";
  inline-size: 100%;
  block-size: 100%;
  z-index: 0;
  overflow: clip;
  container-type: inline-size;
  background-color: var(--surface-1);
}

.body {
  grid-area: 2 / 1 / 3 / 3;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    transparent 90vh,
    var(--surface-500) 90vh,
    var(--surface-500)
  );
  overflow: clip auto;
  padding-inline-start: 5em;
  transition: filter var(--duration-moderate-1) var(--ease-3);

  & > div {
    border-top-left-radius: var(--radius-4);
    background-color: var(--surface-2);
    isolation: isolate;
    inline-size: 100%;
    block-size: fit-content;
    min-block-size: 100%;
  }
}
