Next.js 14 Image component responsiveness

.jsx

    // All solutions are for only image URLs. Statically imported image don't have this complexity.
    <div className="grid grid-cols-3 gap-10">
      {blogs.map(({ title, desc, img, id, imgUrl }) => (
        <div className="text-center p-5 rounded-lg shadow-md" key={id}>
          <h2>{title}</h2>
          // OPTION 1: This will make the image width 100% to the container and dony by css.
          <Image
            // src={imgUrl}
            src={img}
            width={0}
            height={0}
            sizes="100vw"
            style={{ width: "100%", height: "auto" }}
            alt=""
          />

          <div className="md:flex items-center space-x-0">
            <div className="w-full md:w-[50%]">
              // OPTION 2: This will make the image width 100% to the container. It's done by layout props.
              <Image
                layout="responsive"
                src={img}
                width={0}
                height={0}
                alt=""
              />
            </div>
            // OPTION 3: This will make the image width 100% to the container. It's done by size props and tailwind. Not sure how it's working for 100vw, but somehow working.
            // Collected from: https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724
            <Image
              src={img}
              width={0}
              height={0}
              sizes="100vw"
              className="w-full md:w-1/2 h-auto"
              alt=""
            />
            <p className="w-full md:w-[50%]">{desc}</p>
          </div>
        </div>
      ))}
    </div>