/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/certificeringen/styles/src/certificeringen.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.certs{
  display:flex;
  flex-flow:row wrap;
  gap:2rem;
  justify-content:center;
  margin-block:2rem;
}
@media (max-width:768px){
  .certs{
    gap:4rem;
  }
}

.cert{
  align-items:center;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  justify-content:center;
  position:relative;
  text-decoration:none;
}
.cert__image-container{
  flex:0 0 auto;
  height:6rem;
  position:relative;
  width:6rem;
}
.cert__image-container:before{
  background-image:url(/wp-content/themes/encobaaijens/assets/img/diamond.svg);
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
  content:"";
  display:block;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:-1;
}
.cert__image{
  height:60%;
  -o-object-fit:contain;
     object-fit:contain;
  -o-object-position:center;
     object-position:center;
  top:50%;
  transform:translate(-50%, -50%);
  width:60%;
}
.cert__image,.cert__name{
  left:50%;
  position:absolute;
}
.cert__name{
  background-color:var(--color-green-600);
  border-radius:calc(var(--border-radius-s)/2);
  bottom:0;
  color:#fff;
  font-size:.85rem;
  max-width:15rem;
  opacity:0;
  padding:1rem;
  pointer-events:none;
  transform:translate(-50%, 100%);
  transition:transform .25s var(--ease-main), opacity .25s var(--ease-main);
  width:6rem;
  width:-moz-max-content;
  width:max-content;
}
@media (min-width:769px){
  .cert:focus .cert__name,.cert:hover .cert__name{
    opacity:1;
    transform:translate(-50%, calc(100% + .5rem));
  }
}
@media (max-width:768px){
  .cert{
    align-items:start;
    flex-direction:row;
    justify-content:start;
    width:100%;
  }
  .cert .cert__name{
    background-color:transparent;
    color:var(--color-green-600);
    font-size:1.125rem;
    left:0;
    max-width:100%;
    opacity:1;
    position:relative;
    transform:none;
  }
}

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