<div class="main">
		<div class="image-blend">
			<img src="https://res.cloudinary.com/sekrab/image/upload/v1654272980/sanity/frontimage_bh2vcl.jpg" alt="">
		</div>
		<div class="text-blend">
      <div>
			Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero doloremque ipsum repellendus tempore est
			eaque reiciendis rem maiores quos minima placeat modi, optio porro ipsa velit consequuntur ab
			exercitationem? Rerum.
      </div>
		</div>
		<div class="bg-image-blend">
			<img src="https://res.cloudinary.com/sekrab/image/upload/v1654272980/sanity/frontimage_bh2vcl.jpg" alt="">
			<div>
				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae beatae, consectetur rerum optio
				asperiores temporibus iste itaque voluptate corporis natus quae aliquam dicta voluptas eius sunt minus
				sit autem veniam!
			</div>
		</div>
	</div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font: bold 20px/1 Roboto;

}

.main {
  padding: 10px;

  width: 600px;
  margin: 0 auto;
  height: 100%;
  // add background of page
  background: transparent url("https://res.cloudinary.com/sekrab/image/upload/v1654272980/sanity/bgimage_jv0rcb.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
  display: block;
}

.image-blend {
  width: 50%;
  margin: 0 auto;
  img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    // add blend mode directly
    mix-blend-mode: multiply;   
  }
}

.text-blend {
  width: 50%;
  margin: 10px auto;
  position: relative;
  padding: 10px;
  div {
    // place text on top of blend mode
    position: relative;
  }
  // add background to a pseudo element
  &:before {
    content: "";
    display: block;

    position: absolute;
    
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // add bg color, to reduce effect, reduce opacity
    background-color: rgba(125,120,17, 39%);
    mix-blend-mode: color-burn;  
  }
}

.bg-image-blend {
  width: 50%;
  margin: 10px auto;
  position: relative;
  padding: 10px;
  div {
    // make it relative to increase its zindex
    position: relative;  
  }
  // add image as absolutely positioned layer
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;	
    // make it cover the whole background
    object-fit: cover;
    
    mix-blend-mode: multiply;
    // add extra filters for more effects
    // filter: saturate(10%);
  }
}