Responsive Hero Banner with Image Overlay & CTAs

<section class="relative w-full">
  <div class="sm:h-[78vh] lg:h-[86vh] h-[68vh] relative">
    <img src="https://cdn.midjourney.com/f921b7eb-613a-4231-8519-1dda2c1a00ae/0_0.png?w=800&amp;q=80" alt="Fall–Winter ready-to-wear editorial portrait" class="absolute inset-0 h-full w-full object-cover" style="">
    <div class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent"></div>
    <div class="z-10 flex sm:px-6 lg:px-8 h-full pr-4 pb-16 pl-4 relative items-end justify-center">
      <div class="text-center max-w-3xl">
        <p class="text-xs sm:text-sm uppercase tracking-wide text-white/80">Fragrance</p>
        <h1 class="sm:text-5xl lg:text-6xl text-4xl font-semibold text-white tracking-tight mt-2">
          The Signature Parfum Collection
        </h1>
        <p class="sm:text-base text-sm text-white/90 max-w-2xl mt-3 mr-auto ml-auto">Artisanal compositions crafted with
          rare essences. Each fragrance tells a story of sophist .</p>
        <div class="flex gap-3 mt-6 justify-center">
          <a href="#"
            class="inline-flex items-center justify-center hover:bg-neutral-100 text-sm font-medium text-black bg-white rounded-md pt-2.5 pr-4 pb-2.5 pl-4">Discover
            Scents</a>
          <a href="#"
            class="inline-flex items-center justify-center hover:bg-white/10 text-sm font-medium text-white border-white/70 border rounded-md pt-2.5 pr-4 pb-2.5 pl-4">View
            fragrance notes</a>
        </div>
      </div>
    </div>
  </div>
</section>