Tailwind text padding and marging is not perfect on md

i have a problem with my code

<motion.div variants={fadeIn('up', 'tween', 0.2, 1)}        className="flex flex-col items-center justify-center        lg:px-0 lg:py-0"><div className="flex flex-row items-center justify-center gap-4"><div className="flex flex-col items-center justify-center"><span    className="absolute bg-gradient-to-r blur-xl    from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-2xl md:text-5xl    font-extrabold text-transparent md:mt-20">  {t('Pricing.Flexible')}</span><h1 className="relative justify-center text-center select-autofont-poppins text-2xl font-semibold md:text-5xl md:mt-20bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 text-transparent bg-clip-text">            {t("Pricing.Flexible")}</h1></div><h1 className="font-poppins text-2xl font-semibold md:text-5xl md:mt-20">        {t('Pricing.Title')}</h1></div>

On "lg" it's perfect like this:

But on md and lower

Can someone help me?Thanks for your answers :)