Quiero que mi imagen responda en la vue móvil. He estado configurando Image className con clases tailwindcss, y funciona cuando solo uso reactjs o una etiqueta img normal. Quiero que esta imagen responda. He intentado configurar atributo de diseño de la imagen con "sensible" pero la imagen desaparece. He intentado configurarlo con "relleno", pero es demasiado grande y plano, en realidad "llena" toda mi pantalla 😂

este es mi codigo

 <div className="flex justify-center lg:items-end lg:justify-end">
 <Image
 className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]"
 src={data?.image}
 alt="person_hero"
 width="421"
 height="426"
 />
</div>

Encontré la forma La imagen debe estar envuelta en su código de respuesta. no coloque su nombre de clase receptivo en el componente de imagen Nextjs directamente.

este es el código resuelto mi problema.

 <div className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]">
 <Image src={data?.image} alt="person_hero" width="421" height="426" />
 </div>