<section data-component-type="Hero" class="relative" data-component-slug="ss-amusement-park-page-hero">
  <div class="max-w-[1920px] mx-auto">
    <!-- Hero Image Container with fixed aspect ratio -->
    <div class="relative w-full aspect-[1920/1160]">
      <!-- Background Image -->
      <img data-node="page_hero_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298131/seltrix/templates/ss-amusement-park-template/page-hero.png" src="{{page_hero_image}}" alt="Page hero background" class="absolute inset-0 w-full h-full object-cover">

      <!-- Dark Gradient Overlay (optional, for text readability) -->
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>

      <!-- Hero Content - Title positioned at bottom left -->
      <div class="absolute inset-0 flex items-end">
        <div class="w-full px-8 lg:px-16 xl:px-24 pb-12 md:pb-16 lg:pb-20">
          <h1 data-node="page_hero_title" data-node-type="textarea" data-node-label="Page Title" data-node-default="Discover Endless Fun Around Every Corner" class="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-medium text-white italic leading-tight max-w-2xl">
            {{page_hero_title}}
          </h1>
        </div>
      </div>
    </div>
  </div>
</section>