CSS blending problem

by Adam Abrams

HTML

<div class="box">
				
				<div class="content">
					
					<div class="container">
						<h1 class="header">HEADLINE</h1>
						<div class="description"><p>Subhead</p></div>
          </div>
          
			</div> <!-- .content -->
				
		</div>

CSS

.box {
	  display: flex;
    align-items: flex-end;
		height: 300px;
    width: 700px;
		background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
    background-size: cover;
    background-repeat: no-repeat;
		}
		
		
	.content {
    float: left;
    width: 100%;
    }
    
   .container {
     background-color: red;
     mix-blend-mode: multiply;
   }
	
  	h1, p {
  		color: white;
      margin: 0;
      padding: 10px;
    }