@value nav-width from './layout-global.css';
@value aside-width from './layout-global.css';


.root {
  composes: root from './layout-global.css';
  display: grid;
  grid-template:
    "nav main aside" minmax(100vh, 1fr)
    / nav-width 1fr aside-width;
}

.main {
  composes: main from './layout-global.css';
  grid-area: main;
}

.nav {
  grid-area: nav;
  background: var(--q-nav-bg);
}

.aside {
  grid-area: aside;
  background: var(--q-nav-bg);
}

.sticky {
  position: sticky;
  top: 0;
}
