<div id=design>

  <img src=photo-1511692277506-3be3a7ab1686>

  <div id=rotatedBorder></div>

  <div class=grid><div data-white></div><div></div><div></div><div data-white></div></div>

  <div id=blend>
    <img src=photo-1511692277506-3be3a7ab1686>
    <div class=grid><div></div><div data-white></div><div data-white></div><div></div></div>
  </div>

</div>

#design {
  position: relative; width: 300px; height: 300px;
  margin: auto; margin-top: 100px;  
}

#design > *, #blend > * { position: absolute; height: 100%; width: 100%; }

#rotatedBorder {
  box-sizing: border-box; border: 15px #eb311f solid;
  transform: rotate(45deg);
  box-shadow: 0 0 10px #eb311f, inset 0 0 20px #eb311f;
}

.grid { display: grid; grid: repeat(2, 1fr) / repeat(2, 1fr); }

[data-white]{ background-color: white; }

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

img { object-fit: cover; }

#design > img{box-shadow: 0 0 20px #bac3c3; }