$background-color: #d0d0d0;

body {
  background-color: $background-color;
  font-size: 12px;
}

.example{
  float: left;
  margin: 1em;
  p {
    font-size: 2em;
    text-align: center;
  }
}

.img-container{
  background-color: $background-color;
  height: 213px;
}

.mix-blend-mode{
  mix-blend-mode: multiply;
}

@function opacitator($color){
  $hi: 1;
  $lo: 0;
  $tol: 0.01;
  $rgbs: (red($color) green($color) blue($color));
  
  @while($hi - $lo > $tol){
    $m: $lo + (($hi - $lo) / 2);
    @if(getOpositesForOpacity($m, $rgbs, true)){
      $hi: $m;
    }
    @else{
      $lo: $m;
    }
  }
  $rgbs: getOpositesForOpacity($hi, $rgbs);
  @return rgba( nth($rgbs, 1), nth($rgbs, 2), nth($rgbs, 3), $hi);
}


@function getOpositesForOpacity($opacity, $rgbs, $returnValidity: false){
    $newList: ();
    $valid: true;
    @each $c in $rgbs{
      $newVal: oppositeForOpacity($opacity, $c);
      @if( $newVal >= 0 ){
         $newList: append($newList, $newVal);
      }
      @else{
        @return false; 
      }
    }
    @if($returnValidity ){
      @return $valid;
    }
    @else{
        @return $newList;
    }
}


@function oppositeForOpacity($opacity, $c){
    @return 255 - ( 255 - $c ) / $opacity;
}

.layerd {
  position: relative;
  &::after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: opacitator($background-color);
  }
}