:root {
  --gutter: 12px;
}

.homepage-grid {
  width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
}

.homepage-grid .section.wide {
  grid-column: span 2;
}

.homepage-grid .section.narrow {
  grid-column: span 1;
}

.page {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  column-gap: var(--gutter);
  padding: var(--gutter);
}

.heading {
  margin: var(--gutter);
}

.sidebar {
  grid-column: 1 / 3;
  grid-row: 1 / -1;
}

.main {
  grid-column: 3 / -1;
  grid-row: 1 / -1;

  display: grid;
  grid-template-columns: subgrid;  /* inherits the parent's col 3–14 tracks */
  gap: var(--gutter);
  align-content: start;
}

.main .card {
  grid-column: span 4;
}