.swiper {
  padding-top: 15px;
  /* allow room for scale-up */
  padding-bottom: 15px;
  /* same for bottom */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  /* or whatever height works best for your layout */
  overflow: hidden;
  /* ensure scaled images don't bleed out */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1);
  transition: transform 1.2s ease-in-out;
  will-change: transform;
}

.swiper-slide img {
  width: auto;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Active slide scale */
.swiper-slide-active {
  transform: scale(1.2);
  z-index: 2;
}

/* Smaller scales for smaller viewports */
@media (max-width: 999px) {
  .swiper-slide {
    height: 160px;
  }

  .swiper-slide-active {
    transform: scale(1.08);
  }
}

@media (max-width: 599px) {
  .swiper-slide {
    height: 140px;
  }

  .swiper-slide-active {
    transform: scale(1.05);
  }
}