.pro-swiper {
  width: 100%;
  max-width: 100%;
  height: 500px;       /* maksymalna wysokość hero */
  overflow: visible;   /* żeby boczne slides były częściowo widoczne */
}

.hero-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
  opacity: 0.5;              /* wszystkie poza aktywnym wyszarzone */
  filter: grayscale(80%);
  cursor: pointer;
}

.swiper-slide-active {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);     /* centralny slide większy */
}

.hero-slide img {
  width: 100%;                /* wypełnia slide */
  max-width: 300px;           /* ograniczenie wielkości */
  height: 100%;
  object-fit: cover;          /* brak bocznych marginesów */
  border-radius: 12px;
}