<section data-component-type="Content" class="relative" data-component-slug="ss-amusement-park-reasons">
  <!-- Background Image -->
  <div class="relative w-full">
    <img data-node="reasons_image" data-node-type="file" data-node-label="Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768298138/seltrix/templates/ss-amusement-park-template/reasons-bg.png" src="{{reasons_image}}" alt="Park view" class="w-full aspect-[1920/1040] object-cover">

    <!-- Overlay Content -->
    <div class="absolute inset-0 flex flex-col justify-between p-8 lg:p-16 xl:p-24">
      <!-- Title -->
      <h2 data-node="reasons_title" data-node-type="textarea" data-node-label="Section Title" data-node-default="More Reasons To Love Every Visit" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight max-w-xl">
        {{reasons_title}}
      </h2>

      <!-- Feature Tags -->
      <div class="flex flex-col md:flex-row justify-between gap-4 md:gap-8">
        <div class="text-center md:text-left">
          <p data-node="reasons_tag_1" data-node-type="text" data-node-label="Feature Tag 1" data-node-default="Rides for every age" class="text-white text-sm md:text-base">
            {{reasons_tag_1}}
          </p>
        </div>
        <div class="text-center">
          <p data-node="reasons_tag_2" data-node-type="text" data-node-label="Feature Tag 2" data-node-default="Safe, family-friendly zones" class="text-white text-sm md:text-base">
            {{reasons_tag_2}}
          </p>
        </div>
        <div class="text-center md:text-right">
          <p data-node="reasons_tag_3" data-node-type="text" data-node-label="Feature Tag 3" data-node-default="Food kids and parents love" class="text-white text-sm md:text-base">
            {{reasons_tag_3}}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>