.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

main {
  align-items: start;
  display: grid;
  grid-area: main;
  grid-template-areas: "empty content sidebar";
  grid-template-columns: 1fr minmax(0, 650px) 4fr;
}

header {
  background: var(--bg1);
  grid-area: header;
}

footer {
  grid-area: footer;
}

main,
footer {
  margin: 0.5em 1.1em;
}

.content {
  grid-area: content;
}

.sidebar {
  display: none;
  flex-direction: column;
  grid-area: sidebar;
  margin-top: 3rem;
  position: sticky;
  top: 2rem;

  @media (--lg) {
    display: flex;
  }
}