.flex-layout.beeldslider {
  padding-inline: max(1rem, calc(1 * var(--su)));
}

.flex-layout.beeldslider .beeldslider-sheet {
  background-color: var(--wit);
  padding: max(2.5rem, calc(4.125 * var(--su))) 0 max(2.5rem, calc(3.5 * var(--su)));
}

.flex-layout.beeldslider .beeldslider-swiper {
  overflow: hidden;
  margin-inline: calc(-1 * max(1rem, calc(1 * var(--su))));
}

.flex-layout.beeldslider .beeldslider-slide {
  width: max(18rem, calc(42.5 * var(--su)));
  height: auto;
  margin-inline: max(0.5rem, calc(0.5 * var(--su)));
}

.flex-layout.beeldslider .beeldslider-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 680 / 632;
  border-radius: max(8px, calc(0.5 * var(--su)));
  object-fit: cover;
}

.flex-layout.beeldslider .beeldslider-controls {
  display: flex;
  justify-content: center;
  gap: max(0.5rem, calc(0.5 * var(--su)));
  margin-top: max(1.5rem, calc(2 * var(--su)));
}

.flex-layout.beeldslider .beeldslider-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pk-button-size);
  height: var(--pk-button-size);
  border: 1px solid var(--ats-blue);
  border-radius: max(8px, calc(0.5 * var(--su)));
  background: none;
  padding: 0;
  color: var(--ats-blue);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.flex-layout.beeldslider .beeldslider-nav svg {
  width: max(1.25rem, calc(1.5 * var(--su)));
  height: max(1.25rem, calc(1.5 * var(--su)));
}

.flex-layout.beeldslider .beeldslider-nav.prev svg {
  transform: scaleX(-1);
}

.flex-layout.beeldslider .beeldslider-nav:hover {
  background-color: var(--ats-blue);
  color: var(--wit);
}

.flex-layout.beeldslider .beeldslider-nav.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .flex-layout.beeldslider .beeldslider-slide {
    width: min(20rem, 82vw);
  }
}