<section data-component-type="Content" class="bg-white py-16 md:py-24" data-component-slug="ss-amusement-park-tickets-grid">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Top Row: 2 Large Ticket Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <!-- Adventure Pass -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ticket_1_image" data-node-type="file" data-node-label="Ticket 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298159/seltrix/templates/ss-amusement-park-template/ticket-adventure.png" src="{{ticket_1_image}}" alt="Adventure Pass" class="w-full aspect-[854/560] object-cover">
        </div>
        <h3 data-node="ticket_1_title" data-node-type="text" data-node-label="Ticket 1 Title" data-node-default="Adventure Pass" class="text-xl md:text-2xl font-bold text-gray-900 mb-2">
          {{ticket_1_title}}
        </h3>
        <p data-node="ticket_1_description" data-node-type="textarea" data-node-label="Ticket 1 Description" data-node-default="Perfect for thrill-seekers who want nonstop rides, big drops, and heart-racing excitement all day." class="text-gray-500 text-sm leading-relaxed">
          {{ticket_1_description}}
        </p>
      </div>

      <!-- Family Fun Pass -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ticket_2_image" data-node-type="file" data-node-label="Ticket 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298161/seltrix/templates/ss-amusement-park-template/ticket-family.png" src="{{ticket_2_image}}" alt="Family Fun Pass" class="w-full aspect-[854/560] object-cover">
        </div>
        <h3 data-node="ticket_2_title" data-node-type="text" data-node-label="Ticket 2 Title" data-node-default="Family Fun Pass" class="text-xl md:text-2xl font-bold text-gray-900 mb-2">
          {{ticket_2_title}}
        </h3>
        <p data-node="ticket_2_description" data-node-type="textarea" data-node-label="Ticket 2 Description" data-node-default="Perfect for thrill-seekers who want nonstop rides, big drops, and heart-racing excitement all day." class="text-gray-500 text-sm leading-relaxed">
          {{ticket_2_description}}
        </p>
      </div>
    </div>

    <!-- Rides Grid: 3 Columns -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Ride 1: Bumper -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_1_image" data-node-type="file" data-node-label="Ride 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298141/seltrix/templates/ss-amusement-park-template/ride-bumper.png" src="{{ride_1_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_1_title" data-node-type="text" data-node-label="Ride 1 Title" data-node-default="Bumper" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_1_title}}
        </h3>
        <p data-node="ride_1_description" data-node-type="textarea" data-node-label="Ride 1 Description" data-node-default="Crash, spin, and laugh your way through friendly fun." class="text-gray-500 text-sm leading-relaxed">
          {{ride_1_description}}
        </p>
      </div>

      <!-- Ride 2: Wave Swinger -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_2_image" data-node-type="file" data-node-label="Ride 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298154/seltrix/templates/ss-amusement-park-template/ride-swinger.png" src="{{ride_2_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_2_title" data-node-type="text" data-node-label="Ride 2 Title" data-node-default="Wave Swinger" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_2_title}}
        </h3>
        <p data-node="ride_2_description" data-node-type="textarea" data-node-label="Ride 2 Description" data-node-default="Soar in the air as you swing, spin, and smile together." class="text-gray-500 text-sm leading-relaxed">
          {{ride_2_description}}
        </p>
      </div>

      <!-- Ride 3: Kids Carousel -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_3_image" data-node-type="file" data-node-label="Ride 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298146/seltrix/templates/ss-amusement-park-template/ride-carousel.png" src="{{ride_3_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_3_title" data-node-type="text" data-node-label="Ride 3 Title" data-node-default="Kids Carousel" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_3_title}}
        </h3>
        <p data-node="ride_3_description" data-node-type="textarea" data-node-label="Ride 3 Description" data-node-default="Classic merry-go-round fun with bright lights and happy tunes." class="text-gray-500 text-sm leading-relaxed">
          {{ride_3_description}}
        </p>
      </div>

      <!-- Ride 4: Skycoaster -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_4_image" data-node-type="file" data-node-label="Ride 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298153/seltrix/templates/ss-amusement-park-template/ride-skycoaster.png" src="{{ride_4_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_4_title" data-node-type="text" data-node-label="Ride 4 Title" data-node-default="Skycoaster" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_4_title}}
        </h3>
        <p data-node="ride_4_description" data-node-type="textarea" data-node-label="Ride 4 Description" data-node-default="Feel the rush of flying high with breathtaking views and bold thrills." class="text-gray-500 text-sm leading-relaxed">
          {{ride_4_description}}
        </p>
      </div>

      <!-- Ride 5: Mini Train Ride -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_5_image" data-node-type="file" data-node-label="Ride 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298155/seltrix/templates/ss-amusement-park-template/ride-train.png" src="{{ride_5_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_5_title" data-node-type="text" data-node-label="Ride 5 Title" data-node-default="Mini Train Ride" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_5_title}}
        </h3>
        <p data-node="ride_5_description" data-node-type="textarea" data-node-label="Ride 5 Description" data-node-default="A gentle journey through the park that kids absolutely love." class="text-gray-500 text-sm leading-relaxed">
          {{ride_5_description}}
        </p>
      </div>

      <!-- Ride 6: Ferris Wheel -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_6_image" data-node-type="file" data-node-label="Ride 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298147/seltrix/templates/ss-amusement-park-template/ride-ferris.png" src="{{ride_6_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_6_title" data-node-type="text" data-node-label="Ride 6 Title" data-node-default="Ferris Wheel" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_6_title}}
        </h3>
        <p data-node="ride_6_description" data-node-type="textarea" data-node-label="Ride 6 Description" data-node-default="Relax and enjoy scenic views from the top with family and friends." class="text-gray-500 text-sm leading-relaxed">
          {{ride_6_description}}
        </p>
      </div>

      <!-- Ride 7: Haunted Mansion -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_7_image" data-node-type="file" data-node-label="Ride 7 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298151/seltrix/templates/ss-amusement-park-template/ride-haunted.png" src="{{ride_7_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_7_title" data-node-type="text" data-node-label="Ride 7 Title" data-node-default="Haunted Mansion" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_7_title}}
        </h3>
        <p data-node="ride_7_description" data-node-type="textarea" data-node-label="Ride 7 Description" data-node-default="Just spooky enough to excite, but fun enough to keep it playful." class="text-gray-500 text-sm leading-relaxed">
          {{ride_7_description}}
        </p>
      </div>

      <!-- Ride 8: Water Rides -->
      <div class="group">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_8_image" data-node-type="file" data-node-label="Ride 8 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298157/seltrix/templates/ss-amusement-park-template/ride-water.png" src="{{ride_8_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_8_title" data-node-type="text" data-node-label="Ride 8 Title" data-node-default="Water Rides" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_8_title}}
        </h3>
        <p data-node="ride_8_description" data-node-type="textarea" data-node-label="Ride 8 Description" data-node-default="Fast twists, exciting drops, and unforgettable splashes from start to finish." class="text-gray-500 text-sm leading-relaxed">
          {{ride_8_description}}
        </p>
      </div>

      <!-- Ride 9: Fun House -->
      <div class="group md:col-span-2 lg:col-span-1 md:w-1/2 lg:w-full md:mx-auto">
        <div class="relative overflow-hidden mb-4">
          <img data-node="ride_9_image" data-node-type="file" data-node-label="Ride 9 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298149/seltrix/templates/ss-amusement-park-template/ride-funhouse.png" src="{{ride_9_image}}" alt="Ride" class="w-full aspect-[563/416] object-cover">
        </div>
        <h3 data-node="ride_9_title" data-node-type="text" data-node-label="Ride 9 Title" data-node-default="Fun House" class="text-lg font-bold text-gray-900 mb-2">
          {{ride_9_title}}
        </h3>
        <p data-node="ride_9_description" data-node-type="textarea" data-node-label="Ride 9 Description" data-node-default="A colorful maze of laughter, surprises, and playful challenges for all ages." class="text-gray-500 text-sm leading-relaxed">
          {{ride_9_description}}
        </p>
      </div>
    </div>
  </div>
</section>