html,
body,
body > #grid {
  width: 100vw;
}

body > #grid {
  /** Required arguments with purportedly ridiculous defaults */
  --grid-gap: 200px;
  --grid-padding: 200px;

  display: grid;
  align-items: start;
  width: 100%;
  gap: var(--grid-gap);
  padding: var(--grid-padding);
  grid-template-columns:
    [full-start compact-start]
      1fr
    [full-end compact-end]
  ;

  @media only screen and (min-width: 50rem) {
    grid-template-columns:
      [full-start]
        1fr
      [compact-start]
        max(50rem)
      [compact-end]
        1fr
      [full-end]
    ;
  }

  > * {
    grid-column: full;
  }

  > :not(main) {
    grid-column: compact;
  }

  > main {
    display: contents;

    > * {
      grid-column: compact;
    }

    > .board,
    > .blocks {
      &:has(> *:nth-child(3)) {
        grid-column: full;
      }
    }

    > section:has(> .board > *:nth-child(3)),
    > section:has(> .blocks > *:nth-child(3)) {
      grid-column: full;
    }
  }
}