<section
  class="w-full bg-center bg-cover bg-no-repeat"
  style="background-image: linear-gradient(rgba(10,15,20,0.7), rgba(10,15,20,0.7)), url('{{imageurl}}');">
  <div
    class="container mx-auto max-w-480 px-[clamp(20px,5vw,120px)] font-archivo flex flex-col gap-8 pt-[clamp(327px,25vw,478px)] pb-[clamp(5rem,12vw,180px)] text-white">
    <div class="flex flex-col xl:flex-row justify-between  xl:items-center  gap-8">
      <!-- Left Text Block -->
      <div class="heading lg:max-[600px]">
      <h1 class="font-bold text-[clamp(2.5rem,6vw,6.5rem)] leading-tight">
        {{title}}
      </h1>
      </div>
      <!-- Right Content -->
      <div class="flex flex-col gap-6 xl:gap-10 pt-0 xl:pt-9 md:max-w-[434px] w-auto">
        <div class="text-base font-normal md:text-xl">
            {{description}}
        </div>
        <div class="hero_cta">
        {{cta}}
        </div>
      </div>
    </di
    v>
  </div>
</section>

