I'm using mix-blend-mode to change the background color of an image. The problem I'm facing is that I've a grey-ish text which overlaps the background image intentionally when shown on a mobile device. This makes however the text unreadable. I've tried all variations of mix-blend-modes and believe my only option is to entirely change the color of the text when it's overlapping.
How can I change the color of a text when it's overlapping another element?
Here is the fiddle:
https://jsfiddle.net/zr8men95/
Relevant portion:
.promo__text {
  grid-area: text;
  z-index: 1;
  margin-left: 1rem;
  margin-right: 1rem;
  color: #6B7F92;
  text-shadow: 0 0 0 black;
}


Change rgb color of text on overlap
I believe your best shot would be to change the text color when you are on an mobile device. I've read your fiddle and you already have some @media zone defined. We can take advantage of that to add some CSS to change the text color whilst in mobile mode.
This block of code:
@media (min-width: 640px) and (max-width: 1024px) {
  .promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }
}

Will change for this:
@media (min-width: 640px) and (max-width: 1024px) {
  .promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }
  
  .promo__text {
    color: white; // You can change the color to whatever fits your need
  }
}

Hope that help!
