Next/image change width and height on mobile responsive

Question

Using next/Image to display image on nexjt app. The problem is to dynamically resize image with less width and height ex. for full screen it should be 15x15 px and for mobile view it should be 8x8 px. So as to modify the look and feel on mobile screen.

I tried adding responsive class like below -

<div className="min-h-44 image-container-small lg:image-container  md:image-container ">

<Image src={staticImageURL} width={0} height={0}  className="image sm:image-small" alt="responsive" />
    </div>

The image is never displayed

CSS:

.image-container {
  width: 300px;
  height:400px;
  background-color: black;
}
.image-container > div {
  position: unset !important;
}

.image-container .image {
  object-fit: contain;
  width: 200px !important;
  position: relative !important;
  height: 100px !important;
}

.image-container-small {
  width: 200px;
  height:400px;
  background-color: grey;
}
.image-container-small > div {
  position: unset !important;
}

.image-container-small .image-small {
  object-fit: contain;
  width: 100px !important;
  position: relative !important;
  height: 100px !important;
}

FYI - layout="fill" is deprecated with latest version