<section data-component-type="Content" class="py-16 md:py-24 bg-white" data-component-slug="ss-amusement-park-designed-for-everyone">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header -->
    <div class="max-w-3xl mx-auto text-center mb-16">
      <h2 data-node="gen_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Designed For Every Generation" class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-6">
        {{gen_title}}
      </h2>
      <p data-node="gen_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="An amusement park thoughtfully created so parents can unwind with confidence while kids explore, play, and discover freely in a joyful, secure environment made for all ages." class="text-gray-500 text-base leading-relaxed">
        {{gen_description}}
      </p>
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card 1 -->
      <div class="border border-gray-100 p-4 pb-8">
        <div class="aspect-[525/336] w-full bg-gray-100 mb-6 overflow-hidden">
          <img data-node="gen_card_1_image" data-node-type="file" data-node-label="Card 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298078/seltrix/templates/ss-amusement-park-template/gen-card-1.png" src="{{gen_card_1_image}}" alt="Kid Friendly" class="w-full h-full object-cover">
        </div>
        <h3 data-node="gen_card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Kid Friendly" class="text-xl font-bold text-gray-900 mb-3">
          {{gen_card_1_title}}
        </h3>
        <p data-node="gen_card_1_desc" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Gentle rides, vibrant play zones, and cheerful spaces designed to spark imagination." class="text-gray-500 text-sm leading-relaxed">
          {{gen_card_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="border border-gray-100 p-4 pb-8">
        <div class="aspect-[525/336] w-full bg-gray-100 mb-6 overflow-hidden">
          <img data-node="gen_card_2_image" data-node-type="file" data-node-label="Card 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298080/seltrix/templates/ss-amusement-park-template/gen-card-2.png" src="{{gen_card_2_image}}" alt="Parent Approved" class="w-full h-full object-cover">
        </div>
        <h3 data-node="gen_card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Parent Approved" class="text-xl font-bold text-gray-900 mb-3">
          {{gen_card_2_title}}
        </h3>
        <p data-node="gen_card_2_desc" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="Clear pathways, visible layouts, and strong safety standards ensuring peace of mind." class="text-gray-500 text-sm leading-relaxed">
          {{gen_card_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="border border-gray-100 p-4 pb-8 md:col-span-2 lg:col-span-1 w-full md:w-1/2 lg:w-full mx-auto">
        <div class="aspect-[525/336] w-full bg-gray-100 mb-6 overflow-hidden">
          <img data-node="gen_card_3_image" data-node-type="file" data-node-label="Card 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298081/seltrix/templates/ss-amusement-park-template/gen-card-3.png" src="{{gen_card_3_image}}" alt="Fun Unlimited" class="w-full h-full object-cover">
        </div>
        <h3 data-node="gen_card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Fun Unlimited" class="text-xl font-bold text-gray-900 mb-3">
          {{gen_card_3_title}}
        </h3>
        <p data-node="gen_card_3_desc" data-node-type="textarea" data-node-label="Card 3 Description" data-node-default="Shared attractions and interactive experiences bring families together, turning moments into lasting memories." class="text-gray-500 text-sm leading-relaxed">
          {{gen_card_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>