.grid-layout {
  margin-top: var(--offset-page);
}

.grid-content {
  grid-template-columns: min(1fr,calc(100vw - var(--page-margins)*2));
  grid-template-areas:
  "header " 
  "aside  " 
  "content";
  grid-gap: 0 var(--baseline);
}

@media screen and (min-width: 64rem) { /* >= 1024px */
  .grid-layout {
    display: grid;
    grid-template-columns: minmax(320px,var(--width-3-column)) 1fr;
    grid-gap: 0;
  }
}

@media screen and (min-width: 80rem) { /* >= 1280px */
  .grid-content {
    grid-template-columns: 2fr minmax(200px,1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
    "header  aside" 
    "content aside";
    grid-gap: 0 calc(var(--baseline) * 2);
  }
}