@utility shell-body {
  & {
    display: grid;
    grid-template-columns:
      minmax(0, var(--lsb-width, auto))
      minmax(0, 1fr);
    grid-template-rows: 1fr;
    gap: var(--gap, 0);
  }

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

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

/* Potential improvements for flexibility with Style Queries or CSS IF in the future. */
@utility shell-grid {
  @apply shell-body;

  & {
    /* Seems to be ok to use inherit too? Test it out. If that's ok, remove this and just use shell-body */
    height: inherit; 

    /* height: 100dvh; */
  }

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

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