.header {
  padding: 2rem 2rem;
}

.header-container {
  max-width: $maxwidth;
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;

  .site-title {
    font-size: 1.5rem;

    a {
      text-decoration: none;
      color: inherit;
    }
  }

  .nav {
    ul {
      display: flex;

      gap: 2.5rem;
      margin: 0;
      padding: 0;
      list-style: none;

      li a {
        font-size: 0.85rem;
        text-decoration: none;
        color: inherit;
        display: block;
      }
    }
  }

  @media (max-width: $mobilewidth) {
    .site-title {
      margin-bottom: 1rem;
    }

    .nav {
      width: 100%;

      ul {
        flex-wrap: wrap;
        gap: 1rem;
      }
    }
  }
}