.shell {
  display: grid;
  grid-template: auto 1fr / var(--m-side) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}
.shell-top { grid-column: 1 / -1; border-bottom: 1px solid var(--m-border); background: var(--m-bg); }
.shell-side { border-right: 1px solid var(--m-border); background: var(--m-bg); overflow: auto; }
.shell-main { min-width: 0; overflow: auto; }
.shell.collapsed { --m-side: 3.75rem; }
@media (max-width: 640px) {
  .shell { grid-template: auto auto 1fr / 1fr; }
  .shell-side { border-right: 0; border-bottom: 1px solid var(--m-border); }
}

.sticky-t { position: sticky; top: 0; z-index: var(--m-z-sticky); }
.sticky-b { position: sticky; bottom: 0; z-index: var(--m-z-sticky); }

.split { display: flex; min-height: 12rem; border: 1px solid var(--m-border); border-radius: var(--m-r); overflow: hidden; }
.split-a { flex: 0 0 var(--split, 40%); min-width: 0; border-right: 1px solid var(--m-border); overflow: auto; }
.split-b { flex: 1; min-width: 0; overflow: auto; }

.aspect { aspect-ratio: 16 / 9; overflow: hidden; }
.aspect > * { width: 100%; height: 100%; object-fit: cover; }
.aspect-1x1 { aspect-ratio: 1; }
.aspect-4x3 { aspect-ratio: 4 / 3; }
.aspect-16x9 { aspect-ratio: 16 / 9; }