/* Estrutura: a grade da página. Cada região cuida do próprio visual no seu arquivo. */

.app {
  height: 100%;
  display: grid;
  grid-template-columns: var(--rail-w) var(--panel-w) minmax(0, 1fr);
  grid-template-rows: var(--top-h) minmax(0, 1fr);
  grid-template-areas:
    "top top top"
    "rail panel stage";
}

@media (max-width: 820px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top-h) minmax(0, 1fr) auto minmax(0, 36%);
    grid-template-areas:
      "top"
      "stage"
      "rail"
      "panel";
  }
}