Overlap text over an image, and as screen is being decreased, change color of overlapping letters

I’m trying to achieve this effect:

enter image description here

And as the screen is being reduced in size, and more letters of my H1 start to overlap the image, I would like them to change color to white. Eventually, when the screen is small enough, the text can just be inside the container that has a background image.

Here’s the code I have so far:

.container {
  max-width:1350px;
  margin:0 auto;
  background-image: url(https://houniqueconstruction.com/wp-content/uploads/2023/02/kam-idris-_HqHX3LBN18-unsplash-scaled.jpg);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top:15em;
    padding-bottom:15em;
    position:relative;
}


.overlay {
  background-color: transparent;
    background-image: linear-gradient(90deg, #FFFFFF 30%, #F2295B00 0%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
  margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

h1 {
  font-size:60px;
  letter-spacing:9px;
  text-transform:uppercase;
}

.custom-cta {
  display:block;
  max-width:100px;
  margin-top:10px;
  text-align:center;
  background:gold;
  padding:20px 40px;
}
<div class="container">
  <div class="overlay">
      <div class="text-box">
        <h1>Complete </br>Remodeli<span style="color:white;">ng</span></h1>
    <p style="max-width:300px;">With 30 years of experience and a track record of successful projects, we have the skills and expertise to remodel your house with precision, efficiency, and minimal stress for you.</p>
    <a class="custom-cta">Contact Us</a>
      </div>
  </div>
</div>