html {
  margin: 0;
  padding: 0;
  font-size: var(--hox-font-size);
  line-height: var(--hox-line-height);
  font-family: var(--hox-font-family);
  background-color: var(--hox-background-color);
  color: var(--hox-font-color);
}

body {
  padding: 0 1em;
  height: 100dvh;
  overflow-y: hidden;
  display: grid;
  grid-template-areas:
    "header header"
    "aside main"
    "footer footer";
  grid-template-rows: 80px 1fr 96px;
  grid-template-columns: 0.25fr auto;
}

nav {
  grid-area: header;
  padding: 1em;
}

nav > ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
aside ul {
  margin: 0;
  padding: 0 0.5em;
}

aside ul h4 {
  margin: 0.5em 0;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
  margin: 0.5em;
}

footer {
  grid-area: footer;
}

@media (max-width: 600px) {
  body {
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
    grid-template-rows: auto 80dvh auto auto;
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  aside {
    order: 3;
  }
  footer {
    order: 4;
  }
}