.page--home {
  .bg {
    display: none;
  }
  .drawer__btn {
    display: none;
  }
  .section--hero-img {
    width: 100%;
    .block--hero-img {
      width: 100%;
      height: 100%;
      max-height: 100%;
      img {
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 70%;
      }
    }
  }
  .section--banner {
    position: relative;
    .ext-slick-nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      > button {
        pointer-events: all;
        position: absolute;
        top: 50%;
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        overflow: hidden;
        text-indent: -9999px;
        backdrop-filter: blur(12px);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        cursor: pointer;
      }
      > button::after {
        content: "";
        width: 30%;
        height: 30%;
        border-bottom: 2px solid white;
        border-right: 2px solid white;
        position: absolute;
        top: 50%;
        left: 50%;
      }
      .ext-slick-prev {
        left: 0;
      }
      .ext-slick-prev::after {
        rotate: 135deg;
        translate: -25% -50%;
      }
      .ext-slick-next {
        right: 0;
      }
      .ext-slick-next::after {
        rotate: -45deg;
        translate: -75% -50%;
      }
    }
  }
}

@media screen and (min-width: 1px) and (max-width: 960px) {
  .page--home {
    .drawer__btn {
      display: block;
    }
    .wrap.pattern-Official {
      .section--hero-img {
        .block--hero-img {
          top: 0;
        }
      }
    }
    .section--banner {
      .ext-slick-nav {
        > button {
          width: 30px;
          height: 30px;
          top: 40%;
        }
        .ext-slick-prev {
          left: -4%;
        }
        .ext-slick-next {
          right: -4%;
        }
      }
    }
  }
}