@media only screen and (max-width: 960px) {

  :root {
    --space-large: 24pt;
    --space-medium: 14pt;
  }

  section.grid ul {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media only screen and (max-width: 640px) {

  body#page {
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
  }

  header {
    flex-direction: column;
    gap: var(--space-medium);
  }

  body:not(body#page) header {
    align-items: start;
  }

  body#page header {
    text-align: center;
  }

  img#logo {
    height: 128px;
  }

  section.grid ul {
    grid-template-columns: repeat(1, 1fr);
  }

  article > div > div {
    border: none;
    padding-right: 0;
  }

  article nav {
    display: none;
  }

}