.nav {
  font-size: 1.5em;
  font-family: $ff-serif;
  &__list {
    list-style: none;
    &--row {
      margin-left: ($space-lg * -1);
      text-align: center;
      & .nav__item {
        display: inline-block;
        margin-left: $space-lg;
      }
      & .nav__link {
        &:hover, &:focus {
          transform: none;
        }
      }
    }
  }
  &__item {
    margin: 0;
    border-radius: 2px;
    transition: background 0.25s ease;
    }
  &__link {
    position: relative;
    color: currentColor;
    transition: transform 0.25s ease;
    @include mq-md {
      &:before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background: $primary;
        opacity: 0;
        z-index: -10;
        transition: all 0.15s ease;
        transform: translateY(1rem) rotate(-2deg);
        transform-origin: left;
      }
      &:hover {
        color: inherit;
        &:before {
          opacity: 1;
          transform: translateY(0) rotate(-2deg)
        }
      }
      &:focus {
        outline: none;
        color: currentColor;
      }
    }
  }
}

.nav {
  font-size: 1.5em;
  font-family: $ff-serif;
  &__list {
    list-style: none;
    &--row {
      margin-left: ($space-lg * -1);
      text-align: center;
      & .nav__item {
        display: inline-block;
        margin-left: $space-lg;
      }
      & .nav__link {
        &:hover, &:focus {
          transform: none;
        }
      }
    }
  }
  &__item {
    margin: 0;
    border-radius: 2px;
    transition: background 0.25s ease;
    }
  &__link {
    position: relative;
    color: currentColor;
    transition: transform 0.25s ease;
    &--icon {
      display: block;
      width: $space-xl;
      height: $space-xl;
      color: $white;
    }
    @include mq-md {
      &:before {
        position: absolute;
        content: '';
        bottom: 0;
        left: 0;
        width: 100%;
        height: 25%;
        background: $primary;
        opacity: 0;
        z-index: -10;
        transition: all 0.15s ease;
        transform: translateY(1rem) rotate(-2deg);
        transform-origin: left;
      }
      &:hover {
        color: inherit;
        &:before {
          opacity: 1;
          transform: translateY(0) rotate(-2deg)
        }
      }
      &:focus {
        outline: none;
        color: currentColor;
      }
    }
  }
}

Add specific code for icon links
Add specific code for icon links
