I'm trying to achieve the UI with responsiveness as below image,

My code for this is,

<div className="w-full flex flex-col justify-center items-center py-5">
      <div className="flex flex-col gap-2 text-center -mb-2 z-10">
        <p className="text-[.7rem] sm:text-sm md:text-base uppercase text-greyLight font-normal">
          Everything about our
        </p>
        <h1 className="text-[2rem] sm:text-[2.5rem] md:text-[4rem] font-normal leading-tight tracking-tight">
          NAME OF THE <br /> COLLECTION
        </h1>
      </div>
      <div className="w-full h-[350px] md:h-[500px] -mt-1 md:-mt-3 relative">
        <Image
          className="w-full h-full object-cover"
          src={HeroImg}
          alt="hero-image"
          quality={100}
          fill={true}
        />
      </div>
      <div className="-mt-10 z-10">
        <Line />
      </div>
      <Container>
        <p className="text-sm md:text-base text-center mt-2 font-shiseido font-light">
          Lorem Ipsum has been the industry's standard dummy text ever since the
          1500s, .....
        </p>
      </Container>
      <Button
        onclickFunction={onclickFunction}
        title={"EXPLORE ARTISTS"}
        className={"mt-7"}
      />
    </div>

And I've done all the things except the image's responsiveness. When I shrink the view port, I want the image to be resized without cropping the image. But when I set the objectFit to contain, the image is not getting the height I give and not filling the full view width as per the design. In cover option, It is not resizing. Also I want the text "NAME OF THE COLLECTION" to be fitted above it. Any help on this to achieve it would be helpfull.