Fixing bug with Headline Highlight/Underline

Hey guys,

I’m trying to fix a bug with a div block I’m styling as a highlighter underline on a headline. I have the headline text and highlighter div nested inside a div, with the highlight positioned absolutely to the bottom of the div.

Read-only: Webflow - Brand Partnership Bible

My problem is whenever the screen size shrinks and the highlighted text has to break into separate lines, the highlight stays stuck to the bottom of the wrapper div and doesn’t break into separate lines with the text. I thought about wrapping each individual word with its own highlight, but because the highlight is a gradient, it won’t look great if the gradient keeps repeating.

Any help is much appreciated, thanks in advance!