<section data-component-type="Content" class="bg-white py-16 md:py-24" data-component-slug="ss-amusement-park-features">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Images Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12">
      <div class="relative overflow-hidden">
        <img data-node="feature_image_1" data-node-type="file" data-node-label="Feature Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298071/seltrix/templates/ss-amusement-park-template/feature-1.png" src="{{feature_image_1}}" alt="Feature image" class="w-full aspect-square object-cover">
      </div>
      <div class="relative overflow-hidden">
        <img data-node="feature_image_2" data-node-type="file" data-node-label="Feature Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298073/seltrix/templates/ss-amusement-park-template/feature-2.png" src="{{feature_image_2}}" alt="Feature image" class="w-full aspect-square object-cover">
      </div>
    </div>

    <!-- Features Cards Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
      <!-- Feature 1 -->
      <div>
        <div class="w-12 h-12 md:w-16 md:h-16 xl:w-[80px] xl:h-[80px] bg-[#006EFF] rounded flex items-center justify-center text-white font-bold text-lg md:text-xl xl:text-2xl mb-4">
          <span data-node="feature_1_number" data-node-type="text" data-node-label="Feature 1 Number" data-node-default="1">{{feature_1_number}}</span>
        </div>
        <h3 data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Safe Fun" class="text-3xl font-bold text-gray-900 mb-2">
          {{feature_1_title}}
        </h3>
        <p data-node="feature_1_description" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Thoughtfully designed rides with safety at the heart. Parents relax while kids play freely." class="text-xl text-gray-500 leading-relaxed">
          {{feature_1_description}}
        </p>
      </div>

      <!-- Feature 2 -->
      <div>
        <div class="w-12 h-12 md:w-16 md:h-16 xl:w-[80px] xl:h-[80px] bg-[#006EFF] rounded flex items-center justify-center text-white font-bold text-lg md:text-xl xl:text-2xl mb-4">
          <span data-node="feature_2_number" data-node-type="text" data-node-label="Feature 2 Number" data-node-default="2">{{feature_2_number}}</span>
        </div>
        <h3 data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="All Ages" class="text-3xl font-bold text-gray-900 mb-2">
          {{feature_2_title}}
        </h3>
        <p data-node="feature_2_description" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="Attractions for toddlers, teens, and adults alike. Everyone finds something they love." class="text-xl text-gray-500 leading-relaxed">
          {{feature_2_description}}
        </p>
      </div>

      <!-- Feature 3 -->
      <div>
        <div class="w-12 h-12 md:w-16 md:h-16 xl:w-[80px] xl:h-[80px] bg-[#006EFF] rounded flex items-center justify-center text-white font-bold text-lg md:text-xl xl:text-2xl mb-4">
          <span data-node="feature_3_number" data-node-type="text" data-node-label="Feature 3 Number" data-node-default="3">{{feature_3_number}}</span>
        </div>
        <h3 data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Happy Moments" class="text-3xl font-bold text-gray-900 mb-2">
          {{feature_3_title}}
        </h3>
        <p data-node="feature_3_description" data-node-type="textarea" data-node-label="Feature 3 Description" data-node-default="Every corner filled with colour, music, and joy. Smiles come naturally here." class="text-xl text-gray-500 leading-relaxed">
          {{feature_3_description}}
        </p>
      </div>

      <!-- Feature 4 -->
      <div>
        <div class="w-12 h-12 md:w-16 md:h-16 xl:w-[80px] xl:h-[80px] bg-[#006EFF] rounded flex items-center justify-center text-white font-bold text-lg md:text-xl xl:text-2xl mb-4">
          <span data-node="feature_4_number" data-node-type="text" data-node-label="Feature 4 Number" data-node-default="4">{{feature_4_number}}</span>
        </div>
        <h3 data-node="feature_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Easy Visits" class="text-3xl font-bold text-gray-900 mb-2">
          {{feature_4_title}}
        </h3>
        <p data-node="feature_4_description" data-node-type="textarea" data-node-label="Feature 4 Description" data-node-default="Clean spaces, clear signage, and friendly staff. A stress-free day for the whole family." class="text-xl text-gray-500 leading-relaxed">
          {{feature_4_description}}
        </p>
      </div>
    </div>
  </div>
</section>