Gradient issue with Header

I am playing around with gradients for my headers and links, but I am having an issue where letters are getting cut at the bottom.

looks like the culprit is having the text transparent and the letter “stepping out” of the gradient space.

This is the CSS I am using

<style> {
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
background-size: 100%;
-webkit-background-clip: text;
color: transparent;
-webkit-box-decoration-break: clone;
} </style>

I am wondering if there is a way, well not having the second line, having smaller text helps but, is there a way to make the transparent text fit in the gradient area no matter what?

Thanks in advance