.skip-link {
  @media (max-width: $max-720) {
    display: none;
  }

  @media (min-width: $min-720) {
    clip: rect(.1rem, .1rem, .1rem, .1rem);
    height: .1rem;
    margin: 0;
    overflow: hidden;
    position: absolute;
    width: .1rem;
  }

  &:focus {
    @media (min-width: $min-720) {
      background-color: $color-white;
      border: .1rem solid $color-gray;
      clip: auto;
      color: $lpblue;
      height: auto;
      line-height: 1;
      outline: 0;
      padding: 2.2rem 2rem 1.8rem;
      text-decoration: none;
      width: auto;
      z-index: z("global-header");
    }

    @include with-layout(static) {
      @media (min-width: $min-720) {
        left: gutter();
        top: 13rem + gutter();
      }

      @media (min-width: $min-1080) {
        left: gutter-double();
      }
    }
  }
}