@mixin detailHeader() {

  @keyframes vibrate {
    0%, 100% {
      transform: translate(0) rotate(0);
    }
    20%, 40%, 60%, 80% {
      transform: translate(-2px, 2px) rotate(-5deg);
    }
    30%, 50%, 70% {
      transform: translate(2px, -2px) rotate(5deg);
    }
  }

  &--header {

    @include media-breakpoint-down(md) {
      .bsi-boardingschool--detail:not(:has(.bsi-boardingschool--detail__subline)) & {
        margin-top: -10rem;
      }
    }

    &--banner--mobile {
      img {
        animation: vibrate 4s ease-in-out infinite;
        &:hover {
          animation: none;
        }
      }
    }

    &--banner {
      rotate: -8deg;

      img {
        position: relative;
        z-index: 100;
        animation: vibrate 4s ease-in-out infinite;
        top: 50px;

        &:hover {
          animation: none;
        }
      }
      &:hover .header-overlay {
        display: flex;
      }

    }
    &--overlay {
      display: none;
      position: absolute;
      top: 50px;
      left: rem(80);
      background-color: $bsi-color_blue;
      height: 100%;
      color: $bsi-color_white;
      font-size: rem(30);
      font-family: $bsi-font_family_sans;
      z-index: 100;
      width: 1000px;
      margin-left: rem(85);
      padding: rem(50);

      &__mobile {
        display: block;
        position: relative;
        top: 7.5rem;
        margin-left: -5rem;
        padding: 0.2rem 0.2rem 0.2rem 7rem;
        z-index: -20;
        font-size: rem(14);
        height: 75px;
        width: calc(100vw - 62px);
      }

      .banner-img {
        @include media-breakpoint-down(xl) {
          width: 65%;
        }
      }

      .bsi-area-usa &, .bsi-area-can & {
        background-color: $bsi-color_red;
      }

      .bsi-area-lc & {
        background-color: $bsi-color_green;
      }

      @include media-breakpoint-down(lg) {
        margin-top: -100px;
      }

      @include media-breakpoint-up(lg) {
        margin-left: rem(-15);
      }

      @include media-breakpoint-up(xl) {
        margin-left: rem(5);
      }

      @include media-breakpoint-up(xxl) {
        margin-left: rem(40);
      }
    }
  }
}