<section class="bg-[#FDFDF9] min-h-[70vh] md:min-h-[85vh] flex flex-col items-center justify-center relative overflow-hidden px-5 py-6 md:py-20 lg:py-24" data-component-type="Hero" data-component-slug="ss-photography-hero">
  <!-- DECORATIVE ROTATED IMAGE LEFT (DESKTOP) -->
  {{#if show_hero_image_left}}
  <div class="absolute left-[-5%] top-[15%] w-[25%] md:w-[20%] lg:w-[320px] xl:w-[380px] aspect-square rotate-[-15deg] hidden sm:block z-0 pointer-events-none">
    <div class="w-full h-full shadow-xl overflow-hidden">
      <img data-node="hero_image_left" data-node-type="file" data-node-label="Hero Image Left" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438748/seltrix/templates/ss-photography/hero-left.png" src="{{hero_image_left}}" class="w-full h-full object-cover" alt="Photography 1">
    </div>
  </div>
  {{/if}}

  <!-- DECORATIVE ROTATED IMAGE RIGHT (DESKTOP) -->
  {{#if show_hero_image_right}}
  <div class="absolute right-[-5%] top-[10%] w-[25%] md:w-[20%] lg:w-[320px] xl:w-[380px] aspect-square rotate-[15deg] hidden sm:block z-0 pointer-events-none">
    <div class="w-full h-full shadow-xl overflow-hidden">
      <img data-node="hero_image_right" data-node-type="file" data-node-label="Hero Image Right" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767438749/seltrix/templates/ss-photography/hero-right.png" src="{{hero_image_right}}" class="w-full h-full object-cover" alt="Photography 2">
    </div>
  </div>
  {{/if}}

  <!-- CENTER CONTENT -->
  <div class="max-w-[1400px] w-full mx-auto relative z-10 text-center flex flex-col items-center">
    <!-- HEADING -->
    <h1 data-node="hero_heading" data-node-type="text" data-node-label="Hero Heading" data-node-default="Capturing Life's Best Moments" class="text-[#2D2D2D] text-[36px] sm:text-[48px] md:text-[64px] lg:text-[80px] font-medium leading-[1.1] mb-6 md:mb-8 max-w-[900px] mx-auto px-2">
      {{hero_heading}}
    </h1>

    <!-- DESCRIPTION -->
    <p data-node="hero_description" data-node-type="text" data-node-label="Hero Description" data-node-default="A modern photography experience crafted for those who want more than pictures, images that breathe emotion, detail, and meaning. From portraits to events and brand visuals, every shot is shaped with artistic precision." class="text-[#5A5A5A] text-[15px] sm:text-[16px] md:text-[18px] leading-relaxed max-w-[650px] mx-auto mb-10 font-sans px-4">
      {{hero_description}}
    </p>

    <!-- CTA BUTTON -->
    <div class="flex justify-center mb-12 sm:mb-0">
      <a data-node="hero_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="works" href="{{hero_cta_link}}" class="inline-flex items-center px-10 py-3.5 md:py-4 bg-black text-white text-[15px] md:text-[16px] font-medium rounded-md hover:bg-black/90 transition-all duration-300">
        <span data-node="hero_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="View Portfolio">
          {{hero_cta_text}}
        </span>
      </a>
    </div>
  </div>

  <!-- MOBILE ONLY IMAGES (VISIBLE ONLY ON SMALL SCREENS) -->
  <div class="sm:hidden flex justify-center gap-6 mt-6 px-5 w-full">
    {{#if show_hero_image_left}}
    <div class="w-[140px] aspect-square border-[8px] border-white shadow-lg overflow-hidden rotate-[-8deg] flex-shrink-0">
      <img src="{{hero_image_left}}" class="w-full h-full object-cover" alt>
    </div>
    {{/if}} {{#if show_hero_image_right}}
    <div class="w-[140px] aspect-square border-[8px] border-white shadow-lg overflow-hidden rotate-[8deg] flex-shrink-0">
      <img src="{{hero_image_right}}" class="w-full h-full object-cover" alt>
    </div>
    {{/if}}
  </div>
</section>