.img-responsive { width: 100% !important; }

/* CSS variables. Not needed for the effect to work. */
:root {
  --base:              #ffffff;
  --bg-blend:          multiply;
  --blur:              0px;
  --fg-blend:          screen;
  --foreground:        var(--serv);
  --opacity:           1;
  --spacing:           0;
}

.spotlight-bg .col-12 .img-wrapper {
  border-top-left-radius: 3rem;
  border-top-right-radius: 3rem;
}

.spotlight-bg .col-12 .spotlight-body {
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
}

.img-wrapper {
  background-color:    var(--base);
  display:             flex;
  flex:                1 1 100%;
  overflow:            hidden;
  padding:             var(--spacing);
  position:            relative;
}

.img-wrapper.img-23 {
  height:              23%;
}

.img-wrapper img {
  //filter:              grayscale(100%) contrast(1) blur(var(--blur));
  flex:                1 0 100%;
  height:              100%;
  max-width:           100%;
  //mix-blend-mode:      var(--bg-blend);
  object-fit:          cover;
  //opacity:             var(--opacity);
  position:            relative;
  width:               100%;
}

/*
.img-wrapper::before {
  background-color:    var(--foreground);
  bottom:              0;
  content:             '';
  height:              100%;
  left:                0;
  mix-blend-mode:      var(--fg-blend);
  position:            absolute;
  right:               0;
  top:                 0;
  width:               100%;
  z-index:             1;
}

div.stichting.img-wrapper::before { background-color:    var(--stichting); }
div.diversiteit.img-wrapper::before { background-color:    var(--diversiteit); }
div.sociale-economie.img-wrapper::before { background-color:    var(--socialeeconomie); }
div.economische-migratie.img-wrapper::before { background-color:    var(--economischemigratie); }
*/