<section class="bg-[#FBF8F3] py-20"
  data-component-type="Content">

  <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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/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="../assets/spot8.png"
          class="w-full h-[220px] object-cover"
        />
      </div>

    </div>

  </div>
</section>
