.swiper {
    width: 100%;
    height: 680px;
    margin-top: 48px;
}

.swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: lightgray;
    box-shadow: 
        0 0 4px rgb(0 0 0 / 4%),
        0 2px 4px rgb(0 0 0 / 4%),
        0 8px 16px rgb(0 0 0 / 8%);
}

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

.swiper .swiper-slide {
    width: 60%;
}

.swiper .swiper-slide:nth-child(2) {
    width: 60%;
}

.swiper .swiper-slide:nth-child(4) {
    width: 60%;
}

.swiper .swiper-slide:nth-child(5) {
    width: 60%;
}

.swiper .swiper-slide:nth-child(6) {
    width: 60%;
}

.swiper .swiper-slide:nth-child(7) {
    width: 60%;
}

.swiper .swiper-slide:nth-child(8) {
    width: 40%;
}

.swiper-button-next,
.swiper-button-prev {
    transition: 0.3s;
}

.swiper-button-next:hover {
    transform: translateX(2px);
}
.swiper-button-prev:hover {
    transform: translateX(-2px);
}

.swiper-button-next {
    right: 10vw;
}

.swiper-button-prev {
    left: 10vw;
}

.swiper-pagination-bullet-active {
    background: var(--white);
}

.swiper-hero {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: -14;
}

.swiper-gallery {
  width: 100%;
  height: 90vh;
  position: relative;
  margin: 64px 0;
}

.swiper-gallery .swiper-slide img,
.swiper-hero .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-gallery .swiper-button-next {
  right: 5vw;
}

.swiper-gallery .swiper-button-prev {
  left: 5vw;
}