/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@7.1.5_webpack@5.111.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.28_typescript@5.9.3_webpack@5.111.1/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@17.0.1_sass@1.105.0_webpack@5.111.1/node_modules/sass-loader/dist/cjs/index.js??ruleSet[1].rules[1].use[3]!./components/blocks/projecten/styles/src/projecten.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.project-filters{
  display:flex;
  flex-flow:row wrap;
  gap:.5rem;
  justify-content:center;
  list-style:none;
  margin-block:4rem;
  margin-inline:auto;
  max-width:62rem;
  padding:0;
}
.project-filters__item{
  background-color:var(--color-red-dark);
  cursor:pointer;
  line-height:1;
  padding:.75rem 1.5rem;
  position:relative;
  transition:transform .3s var(--ease-spring), padding .3s var(--ease-spring), background-color .3s var(--ease-main);
}
.project-filters__item:before{
  background-image:url(/wp-content/themes/tibeg/assets/img/icons/close.svg);
  background-repeat:no-repeat;
  background-size:contain;
  content:"";
  height:1lh;
  left:1rem;
  opacity:0;
  position:absolute;
  top:50%;
  transform:translateX(-1rem) translateY(-50%) rotate(90deg);
  transition:transform .3s var(--ease-spring), opacity .3s var(--ease-spring);
  width:1lh;
}
.project-filters__item:focus,.project-filters__item:hover{
  transform:scale(1.05);
}
.project-filters__item.active{
  background-color:var(--color-red-light);
  padding-left:2.5rem;
}
.project-filters__item.active:before{
  opacity:1;
  transform:translateY(-50%);
}
.project-filters__item button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  background:transparent;
  border:none;
  border-radius:0;
  color:inherit;
  font-variation-settings:inherit;
  padding:0;
}

.projecten:not(body){
  margin-block:calc(var(--spacing-m)/4);
}
.projecten__container{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
}
@media (max-width:640px){
  .projecten__container{
    grid-template-columns:1fr !important;
  }
}
.projecten:has(.project:hover) .project{
  opacity:.1;
}
.projecten.no-limit .projecten__container{
  grid-template-columns:repeat(auto-fit, minmax(27rem, 1fr));
}

.project{
  aspect-ratio:16/9;
  cursor:pointer;
  height:auto;
  transition:opacity .3s var(--ease-spring);
  view-transition-name:match-element;
  width:100%;
}
.project:hover{
  opacity:1 !important;
}
.project__image{
  clip-path:polygon(100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 0);
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  transition:clip-path .3s var(--ease-main), transform .3s var(--ease-spring);
  width:100%;
}
.project__image:focus,.project__image:hover{
  clip-path:polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
  transform:scale(1.05);
}
.project__image:active{
  transform:scale(.95);
}
.project__description,.project__gallery,.project__permalink{
  font-size:0;
  left:-9999px;
  line-height:0;
  opacity:0;
  position:fixed;
  top:-9999px;
}
.project.hidden{
  display:none;
}

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