/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/onze-investeringen/styles/src/onze-investeringen.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
:root{
  --spacing-m:clamp(10rem, 35vh, 20rem);
  --spacing-s:calc(var(--spacing-m)/2);
  --col-default:content;
  --col-full:1 / -1;
  --col-left:full-width-start / center-start;
  --col-right:center-start / content-end;
  --col-right-extended:center-start / -1;
  --border-radius-l:10rem;
  --border-radius-ml:6rem;
  --border-radius-m:4rem;
  --border-radius-s:2rem;
  --border-l:0 0 var(--border-radius-l) 0;
  --border-ml:0 0 var(--border-radius-ml) 0;
  --border-m:0 0 var(--border-radius-m) 0;
  --border-s:0 0 var(--border-radius-s) 0;
  --ease-smooth:cubic-bezier(0.5, 0.05, 0, 1);
}

.onze-investeringen{
  --column:1 / -1;
  display:grid;
  gap:2rem;
  grid-template-columns:1fr 4.4fr;
}
.onze-investeringen__nav{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;
  justify-content:space-between;
}
.onze-investeringen__main{
  background-color:var(--color-green);
  border-radius:var(--border-ml);
  height:45rem;
  overflow:hidden;
}

.onze-investeringen-nav-item{
  border-radius:var(--border-s);
  cursor:pointer;
  display:grid;
  overflow:hidden;
  place-items:center;
  position:relative;
}
.onze-investeringen-nav-item:before{
  background-color:var(--color-green);
  content:"";
  display:block;
  height:100%;
  left:0;
  opacity:.9;
  position:absolute;
  top:0;
  transition:opacity .5s var(--ease-smooth);
  width:100%;
  z-index:1;
}
.onze-investeringen-nav-item__image{
  height:100%;
  left:0;
  -o-object-fit:cover;
     object-fit:cover;
  position:absolute;
  top:0;
  width:100%;
}
.onze-investeringen-nav-item__name{
  color:#fff;
  font-family:Literata,serif;
  font-variation-settings:"wght" 300;
  height:auto;
  position:relative;
  text-shadow:0 0 7px rgba(0,0,0,.48);
  z-index:2;
}
.onze-investeringen-nav-item__progress{
  background-color:var(--color-gold);
  bottom:0;
  display:block;
  height:.35rem;
  left:0;
  position:absolute;
  transform:scaleX(0);
  transform-origin:left;
  width:100%;
  z-index:2;
}
.onze-investeringen-nav-item.active:before{
  opacity:0 !important;
}
.onze-investeringen-nav-item:hover:before{
  opacity:.5;
}

.onze-investeringen-main{
  display:block;
  height:100%;
  position:relative;
  text-decoration:none;
}
.onze-investeringen-main:before{
  background-color:var(--color-green);
  content:"";
  display:block;
  opacity:.9;
  z-index:1;
}
.onze-investeringen-main:before,.onze-investeringen-main__image{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.onze-investeringen-main__image{
  -o-object-fit:cover;
     object-fit:cover;
  z-index:0;
}
.onze-investeringen-main__content{
  align-items:start;
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:end;
  max-width:40rem;
  padding:6rem 4rem;
  position:relative;
  z-index:2;
}
.onze-investeringen-main__logo{
  height:3rem;
  -o-object-fit:contain;
     object-fit:contain;
  width:auto;
}
.onze-investeringen-main__title{
  color:var(--color-gold);
  font-size:clamp(2rem, 6vw, 3rem);
  margin-block:2rem;
}
.onze-investeringen-main__excerpt{
  color:#fff;
  margin-bottom:0;
  margin-top:0;
}
.onze-investeringen-main__readmore{
  bottom:6rem;
  color:var(--color-gold);
  font-weight:700;
  margin-bottom:0;
  position:absolute;
  right:4rem;
  z-index:2;
}
.onze-investeringen-main__readmore:after{
  background-color:currentcolor;
  bottom:.1em;
  color:inherit;
  content:"";
  display:block;
  height:1px;
  left:0;
  position:absolute;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s var(--ease-smooth);
  width:100%;
}
.onze-investeringen-main:hover .onze-investeringen-main__readmore:after{
  transform:scaleX(1);
}

/*! Add Soul */
/*# sourceMappingURL=onze-investeringen.css.map*/