@layer layout {
  .gv2-shell {
    container: gv2-shell / inline-size;
    inline-size: min(100% - 2rem, var(--gv2-container));
    margin-inline: auto;
    padding-block: var(--gv2-space-6) var(--gv2-space-10);
  }

  .gv2-shell__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, var(--gv2-sidebar));
    gap: var(--gv2-space-6);
    align-items: start;
  }

  .gv2-shell__main,
  .gv2-shell__aside {
    min-inline-size: 0;
  }

  .gv2-shell__stack {
    display: grid;
    gap: var(--gv2-space-5);
  }

  .gv2-shell__content {
    inline-size: min(100%, var(--gv2-content));
  }

  @container gv2-shell (max-width: 56rem) {
    .gv2-shell__frame {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 40rem) {
    .gv2-shell {
      inline-size: min(100% - 1rem, var(--gv2-container));
      padding-block: var(--gv2-space-4) var(--gv2-space-8);
    }
  }
}