<section data-component-type="Content" class="bg-white py-12 md:py-16 lg:py-24 overflow-hidden" data-component-slug="ss-amusement-park-explore">
  <div class="max-w-[1920px] mx-auto px-6 md:px-8 lg:px-16 xl:px-24">
    <!-- Mobile Layout (stacked) - visible on small screens only -->
    <div class="block lg:hidden">
      <!-- Tags Row 1 -->
      <div class="flex flex-wrap gap-3 mb-6 justify-center">
        <span data-node="explore_tag_1" data-node-type="text" data-node-label="Tag 1" data-node-default="Family-Friendly" class="inline-block bg-[#3B9FFF] text-white font-medium italic text-sm md:text-lg px-4 py-2 shadow-md -rotate-3">{{explore_tag_1}}</span>
        <span data-node="explore_tag_2" data-node-type="text" data-node-label="Tag 2" data-node-default="High Thrill Rides" class="inline-block bg-[#3B9FFF] text-white font-medium italic text-sm md:text-lg px-4 py-2 shadow-md rotate-3">{{explore_tag_2}}</span>
      </div>

      <!-- Images and Title Row -->
      <div class="flex flex-col md:flex-row items-center gap-6 mb-6">
        <!-- Left Image -->
        <div class="w-full md:w-1/3 shadow-lg">
          <img data-node="explore_image_1" data-node-type="file" data-node-label="Left Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298065/seltrix/templates/ss-amusement-park-template/explore-1.png" src="{{explore_image_1}}" alt="Attraction" class="w-full aspect-[357/288] object-cover">
        </div>

        <!-- Center Title -->
        <h2 data-node="explore_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Explore More Than Just Rides And Attractions" class="text-2xl md:text-3xl font-bold text-gray-900 text-center leading-tight flex-1">
          {{explore_title}}
        </h2>

        <!-- Right Image -->
        <div class="w-full md:w-1/3 shadow-lg">
          <img data-node="explore_image_2" data-node-type="file" data-node-label="Right Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298068/seltrix/templates/ss-amusement-park-template/explore-2.png" src="{{explore_image_2}}" alt="Attraction" class="w-full aspect-[342/264] object-cover">
        </div>
      </div>

      <!-- Tags Row 2 -->
      <div class="flex flex-wrap gap-3 justify-center">
        <span data-node="explore_tag_3" data-node-type="text" data-node-label="Tag 3" data-node-default="Live Shows" class="inline-block bg-[#3B9FFF] text-white font-medium italic text-sm md:text-lg px-4 py-2 shadow-md -rotate-2">{{explore_tag_3}}</span>
        <span data-node="explore_tag_4" data-node-type="text" data-node-label="Tag 4" data-node-default="Foods & Treats" class="inline-block bg-[#3B9FFF] text-white font-medium italic text-sm md:text-lg px-4 py-2 shadow-md rotate-6">{{explore_tag_4}}</span>
      </div>
    </div>

    <!-- Desktop Layout (scattered) - visible on lg+ screens only -->
    <div class="hidden lg:block relative min-h-[600px] xl:min-h-[700px]">
      <!-- Left Image -->
      <div class="absolute left-0 top-16 w-[280px] lg:w-[320px] xl:w-[357px] shadow-lg">
        <img src="{{explore_image_1}}" alt="Attraction" class="w-full aspect-[357/288] object-cover">
      </div>

      <!-- Right Image -->
      <div class="absolute right-0 bottom-16 w-[260px] lg:w-[300px] xl:w-[342px] shadow-lg">
        <img src="{{explore_image_2}}" alt="Attraction" class="w-full aspect-[342/264] object-cover">
      </div>

      <!-- Center Title -->
      <div class="absolute inset-0 flex items-center justify-center">
        <h2 class="text-4xl xl:text-5xl font-bold text-gray-900 text-center leading-tight max-w-md xl:max-w-lg">
          {{explore_title}}
        </h2>
      </div>

      <!-- Tag 1: Family-Friendly (top center-left) -->
      <div class="absolute top-8 left-1/3 -rotate-[9.4deg]">
        <span class="inline-block bg-[#3B9FFF] text-white font-medium italic text-2xl xl:text-4xl px-6 py-3 shadow-md">{{explore_tag_1}}</span>
      </div>

      <!-- Tag 2: High Thrill Rides (top right) -->
      <div class="absolute top-20 right-16 xl:right-24 rotate-[13.9deg]">
        <span class="inline-block bg-[#3B9FFF] text-white font-medium italic text-2xl xl:text-4xl px-6 py-3 shadow-md">{{explore_tag_2}}</span>
      </div>

      <!-- Tag 3: Live Shows (bottom left) -->
      <div class="absolute bottom-32 left-1/4 -rotate-[11deg]">
        <span class="inline-block bg-[#3B9FFF] text-white font-medium italic text-2xl xl:text-4xl px-6 py-3 shadow-md">{{explore_tag_3}}</span>
      </div>

      <!-- Tag 4: Foods & Treats (bottom center-right) -->
      <div class="absolute bottom-12 right-1/3 rotate-[8.4deg]">
        <span class="inline-block bg-[#3B9FFF] text-white font-medium italic text-2xl xl:text-4xl px-6 py-3 shadow-md">{{explore_tag_4}}</span>
      </div>
    </div>
  </div>
</section>