/* ==========================================================================
   LAYOUT.CSS — the macro desktop grid
   To rearrange the whole page (desktop only, for now), just redraw the
   grid-template-areas map below. Each window's grid-area name matches the
   class used in the HTML (see index.html).
   ========================================================================== */

.page-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  grid-template-rows: auto auto auto;
  gap: var(--grid-gap);
  grid-template-areas:
    "about    contact"
    "about    software"
    "featured featured";
}

.window--about    { grid-area: about; }
.window--contact  { grid-area: contact; }
.window--software { grid-area: software; }
.window--featured { grid-area: featured; }