Responsive fix for the Next.js Image component

=> First, we have to add the wrapping item with the class image-container and image class to Image component.

<div className={'image-container'}>

<Image src={path} layout="fill" className={'image'} />

</div>

=> you need to add below styling

.image-container {

    width: 100%;

}

.image-container > div {

    position: unset !important;

}

.image-container .image {

    object-fit: contain;

    width: 100% !important;

    position: relative !important;

    height: unset !important;

}