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

.flex-layout.zo_werkt_het .zo-werkt-het-sheet {
  border-top: 1px solid rgba(167, 162, 160, 0.6);
  background-color: var(--wit);
  padding: max(3rem, calc(6 * var(--su))) max(1rem, calc(9 * var(--su))) max(2.5rem, calc(4.125 * var(--su)));
}

.flex-layout.zo_werkt_het .zo-werkt-het-text {
  color: var(--ats-blue);
}

.flex-layout.zo_werkt_het .zo-werkt-het-text > *:first-child {
  margin-top: 0;
}

.flex-layout.zo_werkt_het .zo-werkt-het-text > *:last-child {
  margin-bottom: 0;
}

.flex-layout.zo_werkt_het .zo-werkt-het-text :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.flex-layout.zo_werkt_het .zo-werkt-het-slider {
  margin-top: max(2rem, calc(3.4375 * var(--su)));
}

.flex-layout.zo_werkt_het .zo-werkt-het-swiper {
  overflow: visible;
}

.flex-layout.zo_werkt_het .zo-werkt-het-slide {
  width: max(16rem, calc(20.25 * var(--su)));
  height: auto;
}

.flex-layout.zo_werkt_het .zo-werkt-het-swiper .swiper-slide + .swiper-slide {
  margin-left: max(1rem, calc(1.5 * var(--su)));
}

.flex-layout.zo_werkt_het .zo-werkt-het-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1;
  border: 1px solid rgba(245, 245, 245, 0.3);
  border-radius: max(8px, calc(0.5 * var(--su)));
  background-color: var(--ats-dark-blue);
  background-image: linear-gradient(112.94deg, rgba(37, 99, 211, 0.6) 11.25%, rgba(16, 39, 87, 0.6) 58.56%, rgba(35, 85, 189, 0.6) 85.92%);
  padding: max(1.25rem, calc(1.5 * var(--su))) max(1.25rem, calc(1.5 * var(--su))) max(1.5rem, calc(2.5 * var(--su))) max(1.5rem, calc(2.5 * var(--su)));
}

.flex-layout.zo_werkt_het .zo-werkt-het-number {
  position: absolute;
  top: max(1.25rem, calc(1.5 * var(--su)));
  right: max(1.25rem, calc(1.5 * var(--su)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(2.25rem, calc(2.5 * var(--su)));
  height: max(2.25rem, calc(2.5 * var(--su)));
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: rgba(245, 245, 245, 0.19);
  color: var(--wit);
  font-size: max(1.25rem, calc(1.5625 * var(--su)));
  line-height: 1.2;
}

.flex-layout.zo_werkt_het .zo-werkt-het-body {
  display: flex;
  flex-direction: column;
  gap: max(0.75rem, calc(1 * var(--su)));
  margin-top: auto;
}

.flex-layout.zo_werkt_het .zo-werkt-het-card-title {
  margin: 0;
  color: var(--licht-grijs);
  font-size: max(1.5625rem, calc(1.5625 * var(--su)));
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.flex-layout.zo_werkt_het .zo-werkt-het-card-text {
  margin: 0;
  color: var(--wit);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.zo_werkt_het .zo-werkt-het-scrollbar {
  position: relative;
  height: 2px;
  margin-top: max(1.5rem, calc(2.4375 * var(--su)));
  border-radius: 2px;
  background-color: rgba(167, 162, 160, 0.3);
  cursor: grab;
}

.flex-layout.zo_werkt_het .zo-werkt-het-scrollbar .swiper-scrollbar-drag {
  height: 100%;
  border-radius: 2px;
  background-color: var(--ats-blue);
}

@media only screen and (max-width: 991px) {
  .flex-layout.zo_werkt_het .zo-werkt-het-sheet {
    padding: max(2.5rem, calc(3 * var(--su))) max(1rem, calc(1.5 * var(--su)));
  }

  .flex-layout.zo_werkt_het .zo-werkt-het-slide {
    width: min(20rem, 80vw);
  }
}