/* Keep the medium CTA at narrow widths; give the navigation its own row
   beside the wordmark instead of shrinking the button and its label. */
@media (max-width: 400px) {
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 2px 16px;
    align-content: center;
  }

  .masthead .wordmark {
    grid-column: 1;
    grid-row: 1;
    font-size: 19px;
  }

  .nav-links {
    display: contents;
  }

  .nav-links > a {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .nav-access {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}