<section class="bg-[#FBF8F3] py-20" data-component-type="Content" data-component-slug="ss-tourism-template-spots">

  <div class="max-w-[90%] mx-auto px-6">

    <!-- Heading -->
    <div class="text-center mb-14">

      <h2 class="text-[#0F3D3E] text-3xl md:text-4xl lg:text-5xl font-serif mb-4" data-node="spots_title" data-node-type="text" data-node-label="Spots Section Title" data-node-default="Spots that most people loved">
        {{spots_title}}
      </h2>

      <p class="text-[#6B7C7C] max-w-2xl mx-auto text-base md:text-lg" data-node="spots_description" data-node-type="text" data-node-label="Spots Section Description" data-node-default="We curate every trip with precision, ensuring you explore Japan’s highlights without the stress of planning.">
        {{spots_description}}
      </p>

    </div>

    <!-- Image Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6 xl:h-[500px] lg:h-[400px] h-auto overflow-hidden">

      <!-- Column 1 -->
      <div class="space-y-6">
        <img src="{{spot_image_1}}" data-node="spot_image_1" data-node-type="file" data-node-label="Spot Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739988/seltrix/templates/ss-tourism-template/spot1.png" class="w-full h-[200px] object-cover">

        <img src="{{spot_image_2}}" data-node="spot_image_2" data-node-type="file" data-node-label="Spot Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739990/seltrix/templates/ss-tourism-template/spot2.png" class="w-full h-[240px] object-cover">
      </div>

      <!-- Column 2 -->
      <div>
        <img src="{{spot_image_3}}" data-node="spot_image_3" data-node-type="file" data-node-label="Spot Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739991/seltrix/templates/ss-tourism-template/spot3.png" class="w-full h-[460px] object-cover">
      </div>

      <!-- Column 3 -->
      <div class="space-y-6">
        <img src="{{spot_image_4}}" data-node="spot_image_4" data-node-type="file" data-node-label="Spot Image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739992/seltrix/templates/ss-tourism-template/spot4.png" class="w-full h-[220px] object-cover">

        <img src="{{spot_image_5}}" data-node="spot_image_5" data-node-type="file" data-node-label="Spot Image 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739994/seltrix/templates/ss-tourism-template/spot5.png" class="w-full h-[220px] object-cover">
      </div>

      <!-- Column 4 -->
      <div>
        <img src="{{spot_image_6}}" data-node="spot_image_6" data-node-type="file" data-node-label="Spot Image 6" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739996/seltrix/templates/ss-tourism-template/spot6.png" class="w-full h-[460px] object-cover">
      </div>

      <!-- Column 5 -->
      <div class="space-y-6 hidden lg:block">
        <img src="{{spot_image_7}}" data-node="spot_image_7" data-node-type="file" data-node-label="Spot Image 7" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766739998/seltrix/templates/ss-tourism-template/spot7.png" class="w-full h-[220px] object-cover">

        <img src="{{spot_image_8}}" data-node="spot_image_8" data-node-type="file" data-node-label="Spot Image 8" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740000/seltrix/templates/ss-tourism-template/spot8.png" class="w-full h-[220px] object-cover">
      </div>

    </div>

  </div>
</section>