<section class="flex py-24 px-5 gap-4 flex-col md:flex-row max-w-[1000px] mx-auto container ">
  <div class="w-full relative inline-block">
    <img src="{{ .Params.headerImg }}" alt="Header Image" class="rounded-lg" />
    <div class="absolute inset-0 bg-white opacity-20 rounded-lg pointer-events-none"></div>
  </div>
  <div class="w-full">
    <p class="lg:w-2/3 mx-auto text-4xl sm:text-5xl uppercase text-left title-font mb-4">
      {{ .Params.headerTitle }}
    </p>
    <p class="lg:w-2/3 text-md mx-auto leading-relaxed text-base">
      {{ .Params.headerDesc }}
    </p>
  </div>
</section>