Overflow x appearing when animated (AOS)

Question

How can I get rid of the overflow-x that always appears for the image I put on the top right of my page. I've tried to use "overflow-x-hidden"

I tried to animate the image of a cloud that will fade from the top right

<div
 className='flex flex-wrap overflow-hidden' 
 style={backgroundStyle}>

        <Image
         src={leftCloudPath}
         className='absolute top-0 left-0 h-40 md:h-60 lg:h-40 2xl:h-72 w-auto'
         width={0}
         height={0}
         data-aos="fade-down-right"
         data-aos-duration="1000"/>

        <Image
         src={rightCloudPath}
         className='absolute top-0 right-0 h-40 md:h-60 lg:h-40 2xl:h-72 w-auto'
         width={0}
         height={0}
         data-aos="fade-down-left"
         data-aos-duration="1000"/>

    <main
    className="min-h-screen flex flex-wrap flex-col lg:flex-row items-center justify-center lg:p-24 mt-8 bg-top">
        
        <div className='flex lg:flex-row justify-center items-center'>
            <Image
            src={banner}
            width={0}
            height={0}
            alt='banner'
            className='h-auto w-full lg:w-[714px]'/>
            <div className='h-auto w-[310px] lg:w-[395px] px-5 absolute text-center text-red-500'>
                <h1 className='font-rockwell text-4xl lg:text-5xl font-bold'>{nama}</h1>
                <p className='text-[10px] lg:text-xs font-semibold'>{desc}</p>
            </div>
        </div>

        <Image
        src={path}
         width={0}
         height={0}
         alt={alt}
         className='h-[264px] lg:h-[394px] w-auto'/>

    </main>
</div>