////
/// Main navigation
////

.menu--main {

  .menu {
    display: flex;
    @include breakpoint(small down) {
      flex-direction: column;
      text-align: right;
    }

    &__item {
      @include font-sizes(main-menu-item);
      @include main-menu-item;
      @include breakpoint(small down) {
        width: 100%;
      }

      &:not(:last-child) {
        @include breakpoint(small down) {
          margin-bottom: rem-calc(12);
        }
        @include breakpoint(medium) {
          margin-right: rem-calc(24);
        }
      }

      a {
        padding-right: rem-calc(56);
        color: inherit;
        white-space: nowrap;

        @include breakpoint(medium) {
          padding-right: 0;
          color: $color-gray-900;
        }
      }
    }
  }
}
