.sl-r-banner {
  position: relative;

  // add bottom padding to increase space
  // above page titles (visible on mobile site)
  padding-bottom: 3rem;

  a {
    display: inline-block;
  }

  &__brand a {
    border: 0;
  }

  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;
      padding: sl-px-to-rem(12px) sl-px-to-rem(16px);
      border: 0;
    }
  }
}