.nav {
  .nav__section {
    font-family: $paragraph-font-family;
    font-weight: $paragraph-font-weight;
    margin: 15px 0;
    display: inline-block;
    font-size: 18px;
    color: $color-black;

    @media (min-width: $mobile-breakpoint) {
      display: block;
    }

    &.nav__section--right {
      float: right;

      @media (min-width: $mobile-breakpoint) {
        float: none;
      }
    }

    a {
      color: $color-black;
    }
    .active {
      font-weight: bold;
    }
  }

  .nav__header {
    @media (min-width: $mobile-breakpoint) {
      font-size: 22px;
    }

    a {
      text-decoration: none;

      &:hover {
          text-decoration: underline;
        }
    }
    
    .nav__image {
      width: 130px;
    }

    span {
      @media (min-width: $mobile-breakpoint) {
        display: inline;
      }
    }
  }

  .nav__list {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;

      @media (min-width: $mobile-breakpoint) {
        display: block;
        margin-top: 8px;
        margin-bottom: 8px;
        font-size: 18px;
      }

      a {
        margin-left: 5px;
        text-decoration: none;

        @media (min-width: $mobile-breakpoint) {
          margin-left: 0;
        }

        &:hover {
          color: $color-red;
        }
      }
    }
  }
}
