<section data-component-type="Content" class="bg-white py-16 md:py-24" data-component-slug="ss-amusement-park-attractions">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Section Header -->
    <div class="text-center max-w-2xl mx-auto mb-12 md:mb-16">
      <h2 data-node="attractions_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="Adventures That Spark Pure Joy" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 mb-4">
        {{attractions_title}}
      </h2>
      <p data-node="attractions_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Feel the rush, hear the laughter, and make memories that last forever with rides designed for every age." class="text-#617280 text-sm md:text-base leading-relaxed">
        {{attractions_description}}
      </p>
    </div>

    <!-- Attractions Grid -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-0">
      <!-- Attraction 1 -->
      <div class="group relative overflow-hidden">
        <img data-node="attraction_1_image" data-node-type="file" data-node-label="Attraction 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298057/seltrix/templates/ss-amusement-park-template/attraction-1.png" src="{{attraction_1_image}}" alt="Attraction" class="w-full aspect-[3/4] object-cover transition-transform duration-300 group-hover:scale-105">
        <!-- Overlay Gradient -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
        <!-- Label -->
        <div class="absolute bottom-0 left-0 right-0 p-4">
          <span data-node="attraction_1_label" data-node-type="text" data-node-label="Attraction 1 Label" data-node-default="Wave Swinger" class="text-white text-sm md:text-base font-medium">{{attraction_1_label}}</span>
        </div>
      </div>

      <!-- Attraction 2 -->
      <div class="group relative overflow-hidden">
        <img data-node="attraction_2_image" data-node-type="file" data-node-label="Attraction 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298058/seltrix/templates/ss-amusement-park-template/attraction-2.png" src="{{attraction_2_image}}" alt="Attraction" class="w-full aspect-[3/4] object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4">
          <span data-node="attraction_2_label" data-node-type="text" data-node-label="Attraction 2 Label" data-node-default="Roller Coaster" class="text-white text-sm md:text-base font-medium">{{attraction_2_label}}</span>
        </div>
      </div>

      <!-- Attraction 3 -->
      <div class="group relative overflow-hidden">
        <img data-node="attraction_3_image" data-node-type="file" data-node-label="Attraction 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298059/seltrix/templates/ss-amusement-park-template/attraction-3.png" src="{{attraction_3_image}}" alt="Attraction" class="w-full aspect-[3/4] object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4">
          <span data-node="attraction_3_label" data-node-type="text" data-node-label="Attraction 3 Label" data-node-default="Skycoaster" class="text-white text-sm md:text-base font-medium">{{attraction_3_label}}</span>
        </div>
      </div>

      <!-- Attraction 4 -->
      <div class="group relative overflow-hidden">
        <img data-node="attraction_4_image" data-node-type="file" data-node-label="Attraction 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298060/seltrix/templates/ss-amusement-park-template/attraction-4.png" src="{{attraction_4_image}}" alt="Attraction" class="w-full aspect-[3/4] object-cover transition-transform duration-300 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4">
          <span data-node="attraction_4_label" data-node-type="text" data-node-label="Attraction 4 Label" data-node-default="Fun House" class="text-white text-sm md:text-base font-medium">{{attraction_4_label}}</span>
        </div>
      </div>
    </div>
  </div>
</section>