Apply filter / mask in CSS?

Question

Anticipated Result:

What I managed to get:

Please try not to give me absolute values, so that it's responsive. The Text and the background divider should be always at the center. The text should change its color as needed depending on each character's location. Thanks in advance!

My Html Code:

<div class="bg"></div>
<header>Plants</header>
<h1>Fresh Plants <br> for You.</h1>

My CSS:

header {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: white;
    margin-top: 30px;
    margin-left: 40px;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(31,171,137,1) 0%, rgba(31,171,137,1) 50%, rgba(157,243,196,1) 50%, rgba(157,243,196,1) 100%);
    height: 52rem;
    width: 100%;
}

h1 {
        font-size: 5rem;
        /*color: white;*/
        margin-left: 30.2rem;
        font-weight: 700;
        background-clip: text;
        -webkit-background-clip: text;
        color: rgba(255,255,255,1);
        /*background: linear-gradient(90deg, rgba(31,171,137,1) 0%, rgba(31,171,137,1) 50%, rgba(157,243,196,1) 50%, rgba(157,243,196,1) 100%);*/
    }

Answer 1

since it's a 90deg direction make both backgrounds fixed so they both consider the sreen as reference:

header {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: white;
  margin-top: 30px;
  margin-left: 40px;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(31, 171, 137, 1) 50%, rgba(157, 243, 196, 1) 0) fixed;
  height: 52rem;
  width: 100%;
}

h1 {
  font-size: 5rem;
  font-weight: 700;
  text-align:center;
  color: #0000;
  background: linear-gradient(90deg, #fff 50%, blue 0) fixed;
  background-clip: text;
  -webkit-background-clip: text;
}

<div class="bg"></div>
<header>Plants</header>
<h1>Fresh Plants <br> for You.</h1>