.sl-c-banner {
  position: relative;

  &__brand img {
    display: inline-block;
    margin: 0;
    height: sl-px-to-rem(48px);

    @include sl-breakpoint--medium { height: sl-px-to-rem(96px); }
  }

  &__navigation {
    font-weight: $sl-font-weight--bold;

    ul {
      position: relative;
      margin: 0 -1rem !important;

      @include sl-breakpoint--medium {
        right: -(sl-px-to-rem(16px));
        margin: 0 !important;
      }
    }

    a {
      display: block;
      border: 0;
      padding: sl-px-to-rem(12px) sl-px-to-rem(16px);

      &:hover,
      &:focus { background: rgba($sl-color--iron, .5); }

      &:active { background: $sl-color--iron; }
    }
  }
}