Headline to slide in proportionally across screen sizes

We added some animation to a headline. The end look we want across all screen sizes is this:

We got this covered on desktop. But on tablet, the first line is too far to the right, and the second line too far to the left. On mobile, these lines are even more off.

Is there an accurate or easier way to fix this, so that the spacing (indicated in pink arrows) are proportionally scaled down on smaller screen sizes? All we can think of is to manually play with the margins of these lines, eyeball the spacing, and/or make the font size smaller on smaller screens (though we prefer not to make font size smaller).

Hope there’s a good solution to this. :crossed_fingers:Thanks!

Here is my public share link