/* Slider container */
.brand-slider {
  overflow: hidden;
  width: 100%;
  background: transparent;
  padding: 20px 0;
}

/* Track waar alle slides in zitten */
.brand-slider-track {
  display: flex;
  align-items: center;
  gap: 20px; /* ruimte tussen logo’s */
  transform: translateX(0);
  will-change: transform;
}

/* Elke individuele slide */
.brand-slide {
  flex: 0 0 auto; /* breedte wordt via JS ingesteld */
  height: 100px;   /* vaste hoogte */
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}

/* Logo zelf */
.brand-slide img {
  width: 100%;       /* vult de slide-breedte */
  height: 100%;      /* vult de slide-hoogte */
  object-fit: contain; /* behoud aspect ratio */
  opacity: 0.85;     
  filter: grayscale(100%);
  transition: all 0.3s ease;
  background: transparent;
}

/* Hover effect */
.brand-slide:hover img {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* Schaduw kan via plugin settings inline CSS toegevoegd worden */