html,
      body {
        position: relative;
        height: 100%;
      }

      .swiper {
        width: 100%;
        height: 100vh;
        height: 100dvh;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #444;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
      }

/* Tablet */
@media (max-width: 1024px) {
  .swiper {
    height: 700px;
  }

  .swiper-slide img {
    object-position: 60% center;
  }
}

/* Smartphone */
@media (max-width: 767px) {
  .swiper {
    height: 560px;
  }

  .swiper-slide img {
    object-position: 50% center;
  }
}