$brand-height: 64px;

header {
  display: flex;
  justify-content: space-between;

  .brand {
    display: flex;
    text-decoration: none;
    color: $text-color;
    user-select: none;

    .brand-logo {
      width: auto;
      height: $brand-height;
    }

    .brand-name {
      line-height: $brand-height;
      vertical-align: middle;
      font-size: 28px;

      margin-left: 2rem;

      @media (max-width: $sm) {
        font-size: 20px;
        margin-left: 1rem;
      }
    }
  }

  .site-nav {
    flex-grow: 1;
    max-width: 250px;

    .nav-items {
      display: flex;
      justify-content: space-between;
      list-style: none;
      padding: 0;

      .nav-item {
        text-align: center;

        a {
          text-decoration: none;
          font-size: 1.1rem;
          color: $text-color;

          &:hover {
            color: darken($text-color, 15%);
          }
        }
      }
    }
  }

  @media (max-width: $md) {
    flex-direction: column;

    .site-nav {
      flex-grow: unset;
      max-width: unset;

      .nav-items {
        justify-content: unset;

        .nav-item {
          flex-basis: 100%;
        }
      }
    }
  }
}

body > .header {
  margin-bottom: 1rem;
}