@layer components {
  body > header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: baseline;
    gap: 1rem;

    a {
      text-decoration: none;
    }

    h1 {
      margin: 0;
      text-wrap: nowrap;
    }

    nav {
      display: flex;
      flex-direction: row;
      gap: .5rem;

      @media screen and (width <= 1100px) {
        grid-row: 2;
        grid-column: 1 / span 3;
        flex-wrap: wrap;
      }
    }
  }
}