.shell-grid {
  display: grid;
  grid-template-columns:
    minmax(0, var(--lsb-width, auto))
    minmax(0, 1fr);
  gap: var(--gap, 0);
  height: 100dvh;

  &:has(> header) {
    grid-template-rows: auto 1fr;
  }

  &:has(> .right-sidebar) {
    grid-template-columns:
      minmax(0, var(--lsb-width, auto))
      minmax(0, var(--content-width, 1fr))
      minmax(0, var(--rsb-width, auto));
  }

  & > :is(header, footer, .full) {
    grid-column: 1 / -1;
  }

  > .left-sidebar,
  > .right-sidebar,
  > .content {
    overflow: auto;
    grid-column-end: span var(--span, 1);
    height: auto;
  }
}