.grav-c-nav-menu {
  $trigger-breakpoint: gravy-breakpoint(medium);
  text-align: right;

  > ul {
    margin: 0 (-$grav-sp-s);
    padding: 0;
    list-style-type: none;

    @media (min-width: $trigger-breakpoint) {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0;
    }
  }

  li {
    margin: 0;
  }

  li:not(#{&}__external-link) + li#{&}__external-link {
    margin-top: $grav-sp-s;

    @media (min-width: $trigger-breakpoint) {
      margin-top: 0;
      margin-left: $grav-sp-s;
    }
  }

  .grav-c-nav-link {
    @media (max-width: $trigger-breakpoint - 1) {
      @include typi(huge-text);
    }
  }
}