/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@7.1.4_webpack@5.108.4/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.16_typescript@5.9.3_webpack@5.108.4/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@17.0.0_sass@1.101.0_webpack@5.108.4/node_modules/sass-loader/dist/cjs/index.js??ruleSet[1].rules[1].use[3]!./components/blocks/projecten-preview/styles/src/projecten-preview.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.projecten-previews-container{
  display:flex;
  flex-direction:column;
}
.projecten-previews-container .button{
  margin-left:auto;
}

.project-previews{
  border-radius:var(--border-radius-m);
  display:flex;
  flex-flow:row wrap;
  gap:2rem;
  margin-block:2rem;
  overflow:hidden;
}

.project-preview{
  flex-basis:calc(33.333% - 2rem);
  flex-grow:1;
  height:50rem;
  max-height:60vh;
  position:relative;
  width:100%;
}
.project-preview__image{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.project-preview__info{
  background-color:var(--color-green-600);
  bottom:1rem;
  left:0;
  padding:2rem;
  position:absolute;
  transition:padding .4s var(--ease-fast);
}
.project-preview__info svg{
  height:100%;
  position:absolute;
  right:0;
  top:0;
  transform:translateX(50%);
  width:auto;
}
.project-preview__title{
  color:var(--color-green-100);
  font-size:1.5rem;
  position:relative;
  z-index:1;
}
.project-preview:focus .project-preview__info,.project-preview:hover .project-preview__info{
  padding-left:4rem;
}
@media (max-width:1130px){
  .project-preview{
    flex-basis:calc(50% - 2rem);
  }
}
@media (max-width:768px){
  .project-preview{
    flex-basis:100%;
  }
}

/*! Add Soul */
/*# sourceMappingURL=projecten-preview.css.map*/