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-auto
font-poppins text-2xl font-semibold md:text-5xl md:mt-20
bg-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 🙂