/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./components/blocks/werkwijze-slider/styles/src/werkwijze-slider.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
.werkwijze-slider-item:before,.werkwijze-slider-item__image{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}

.werkwijze-slider{
  margin-bottom:var(--spacing-m);
  margin-top:3rem;
  overflow:scroll visible;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.werkwijze-slider::-webkit-scrollbar{
  display:none;
}
.werkwijze-slider__container{
  display:flex;
  flex-flow:row nowrap;
  gap:1rem;
  max-width:unset;
  padding-right:10rem;
  width:-moz-max-content;
  width:max-content;
}
@media (max-width:768px){
  .werkwijze-slider__container{
    flex-direction:column;
    padding-right:0;
    width:100%;
  }
}
.werkwijze-slider__nav-bar{
  height:4px;
  margin-left:auto;
  margin-top:-1rem;
  max-width:28rem;
  position:relative;
  width:30vw;
}
.werkwijze-slider__nav-bar:before{
  background-color:var(--color-pink-400);
  border-radius:100vmax;
  content:"";
  display:block;
  height:1px;
  opacity:.4;
  width:100%;
}
.werkwijze-slider__nav-bar--align-left{
  margin-left:unset;
}
@media (max-width:768px){
  .werkwijze-slider__nav-bar{
    display:none;
  }
}
.werkwijze-slider__nav-handle{
  background-color:var(--color-pink-400);
  border-radius:100vmax;
  cursor:grab;
  height:4px;
  left:0;
  position:absolute;
  top:0;
  transform:translateY(-50%);
  width:8rem;
}
@media (max-width:768px){
  .werkwijze-slider{
    overflow:visible;
  }
}
.werkwijze-slider{
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  position:relative;
  right:50%;
  width:100vw;
}

.werkwijze-slider-item{
  border-radius:var(--border-radius-m);
  box-shadow:-16px 0 24px -24px #000;
  color:var(--color-background);
  display:block;
  height:50rem;
  max-height:80vh;
  max-width:45vw;
  overflow:hidden;
  position:relative;
  width:32.5rem;
}
.werkwijze-slider-item:before{
  backdrop-filter:blur(1rem);
  background:rgba(0,0,0,.9);
  content:"";
  -webkit-mask-image:linear-gradient(0deg, #000 10%, transparent 50%);
          mask-image:linear-gradient(0deg, #000 10%, transparent 50%);
  transform-origin:bottom;
  z-index:2;
}
.werkwijze-slider-item__image{
  height:inherit;
  max-height:inherit;
  max-width:inherit;
  width:inherit;
  z-index:1;
}
@media (max-width:768px){
  .werkwijze-slider-item__image{
    height:100%;
  }
}
.werkwijze-slider-item .chromatic-image-container-wrapper{
  position:absolute !important;
  top:0;
}
.werkwijze-slider-item__title{
  font-size:clamp(2.5rem, 5vw, 4rem);
  margin-top:0;
}
@media (max-width:768px){
  .werkwijze-slider-item__title{
    margin-bottom:10rem;
  }
}
.werkwijze-slider-item__content{
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between;
  padding:4rem;
  position:relative;
  width:100%;
  z-index:3;
}
@media (max-width:768px){
  .werkwijze-slider-item__content{
    font-weight:400;
    padding:2rem;
  }
  .werkwijze-slider-item{
    height:auto;
    max-width:unset;
    width:100%;
  }
}

/*! Add Soul */
/*# sourceMappingURL=werkwijze-slider.css.map*/