:root {
  --width: 280px;
  --height: 180px;
  --gap: 12px;
  --transition: 0.45s ease;
}

/* Vergroot de containerhoogte zodat geschaalde slides niet afsnijden */
.swiper {
  width: calc(var(--width) * 3 + var(--gap) * 2);
  height: calc(var(--height) * 1.55); /* was 1.25 */
  overflow: visible;
  background: transparent; /* geen achtergrond */
}

.swiper-wrapper {
  align-items: center;
}

.swiper-slide {
  width: var(--width) !important;
  height: var(--height) !important;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  filter: brightness(0.9);
  transition: opacity var(--transition), filter var(--transition);
}

/* responsive */
@media (max-width: 1000px) {
  :root { --width: 240px; --height: 160px; }
  .swiper { height: calc(var(--height) * 1.55); }
}
@media (max-width: 750px) {
  :root { --width: 160px; --height: 105px; --gap: 8px; }
  .swiper { height: calc(var(--height) * 1.55); }
}

@media (max-width: 600px) {
  :root { --width: 110px; --height: 75px; --gap: 6px; }
  .swiper { height: calc(var(--height) * 1.55); }
}

@media (max-width: 500px) {
  :root { --width: 95px; --height: 65px; --gap: 5px; }
  .swiper { height: calc(var(--height) * 1.55); }
}

@media (max-width: 400px) {
  :root { --width: 80px; --height: 55px; --gap: 4px; }
  .swiper { height: calc(var(--height) * 1.55); }
}