Gradient issue with Header

Themes
1

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.

image
image1006×185 60.9 KB

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> .gh-article-title.gh-card-title {
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