/**
 * Grid.
 */

body {
  min-height: 100vh;
  margin: 0;
}

.header {
  grid-area: header;
}

.hero {
  grid-area: hero;
}

.main {
  grid-area: content;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

/**
 * Container to restrict content width.
 */
.container {
  max-width: var(--width-large);
  margin: 0 auto;
  padding: 0 var(--spacing);
}

/**
 * Mobile-first grid layout.
 */
.l-grid {
  display: grid;
  gap: 0;
  min-height: 100vh;
  grid-template-rows:
    auto
    auto
    auto
    1fr
    auto;
  grid-template-areas:
    "header"
    "hero"
    "sidebar"
    "content"
    "footer";
}

.l-grid .main {
  width: 100%;
  margin-top: 2rem;
}

/**
 * Desktop grid layout with full-width header/footer/hero.
 */
@media (min-width: 952px) {
  .l-grid {
    grid-template-columns:
      minmax(0, 1fr)
      min(var(--width-sidebar), 100%)
      min(calc(var(--width-large) - var(--width-sidebar) - 2rem), 100%)
      minmax(0, 1fr);
    grid-template-rows:
      auto
      auto
      1fr
      auto;
    grid-template-areas:
      "header header header header"
      "hero hero hero hero"
      ". sidebar content ."
      "footer footer footer footer";
  }

  .header,
  .hero,
  .footer {
    width: 100%;
  }

  /* Full-width content when sidebar is not present. */
  .l-grid:not(:has(.sidebar)) {
    grid-template-columns:
      minmax(0, 1fr)
      min(var(--width-large), 100%)
      minmax(0, 1fr);
    grid-template-areas:
      "header header header"
      "hero hero hero"
      ". content ."
      "footer footer footer";
  }
}