<section class="bg-[#FAF7F2] py-16 sm:py-20 md:py-24" data-component-type="Content" data-component-slug="ss-tourism-template-start_your_japan">

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

    <!-- Top Heading Row -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_2fr] gap-12 mb-16">

      <!-- Left Heading -->
      <h2 class="font-serif text-3xl sm:text-4xl md:text-5xl leading-tight text-[#193A3F]" data-node="section_heading" data-node-type="textarea" data-node-label="Section Heading" data-node-default="Start Your Japan Journey With These Must-See Destinations.">
        {{section_heading}}
      </h2>

      <!-- Right Description -->
      <p class="text-sm sm:text-base text-[#7E7E7E] max-w-md lg:ml-auto" data-node="section_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="Japan’s diverse regions offer experiences for every kind of traveler — from vibrant cities to peaceful retreat towns. Explore iconic landmarks, cultural districts, scenic nature spots.">
        {{section_description}}
      </p>

    </div>

    <!-- Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-[1.5fr_2fr] lg:gap-[150px] gap-[50px] items-center">

      <!-- LEFT: Image Stack -->
      <div class="space-y-6">

        <img src="{{image_1}}" data-node="image_1" data-node-type="file" data-node-label="Destination Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740002/seltrix/templates/ss-tourism-template/start1.png" alt="Destination Image 1" class="w-full lg:w-[500px] object-cover rounded-sm">

        <img src="{{image_2}}" data-node="image_2" data-node-type="file" data-node-label="Destination Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740003/seltrix/templates/ss-tourism-template/start2.png" alt="Destination Image 2" class="w-full lg:w-[500px] object-cover rounded-sm">

        <img src="{{image_3}}" data-node="image_3" data-node-type="file" data-node-label="Destination Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740005/seltrix/templates/ss-tourism-template/start3.png" alt="Destination Image 3" class="w-full lg:w-[500px] object-cover rounded-sm">

      </div>

      <!-- RIGHT: Destination List -->
      <div class="space-y-12">

        <!-- Destination 1 -->
        <div>
          <p class="text-3xl sm:text-4xl md:text-5xl text-[#193A3F] mb-2" data-node="dest_1_number" data-node-type="text" data-node-label="Destination 1 Number" data-node-default="01">
            {{dest_1_number}}
          </p>

          <h3 class="text-lg font-semibold text-[#193A3F] mb-2" data-node="dest_1_title" data-node-type="text" data-node-label="Destination 1 Title" data-node-default="Tokyo">
            {{dest_1_title}}
          </h3>

          <p class="text-sm text-[#7E7E7E] leading-relaxed max-w-md" data-node="dest_1_desc" data-node-type="textarea" data-node-label="Destination 1 Description" data-node-default="A futuristic metropolis filled with culture, nightlife, shopping, and world-famous dining. Tokyo blends ancient traditions with cutting-edge experiences.">
            {{dest_1_desc}}
          </p>
        </div>

        <!-- Destination 2 -->
        <div>
          <p class="text-3xl sm:text-4xl md:text-5xl text-[#193A3F] mb-2" data-node="dest_2_number" data-node-type="text" data-node-label="Destination 2 Number" data-node-default="02">
            {{dest_2_number}}
          </p>

          <h3 class="text-lg font-semibold text-[#193A3F] mb-2" data-node="dest_2_title" data-node-type="text" data-node-label="Destination 2 Title" data-node-default="Kyoto">
            {{dest_2_title}}
          </h3>

          <p class="text-sm text-[#7E7E7E] leading-relaxed max-w-md" data-node="dest_2_desc" data-node-type="textarea" data-node-label="Destination 2 Description" data-node-default="The cultural heart of Japan, home to ancient temples, geisha districts, peaceful gardens, and centuries-old traditions.">
            {{dest_2_desc}}
          </p>
        </div>

        <!-- Destination 3 -->
        <div>
          <p class="text-3xl sm:text-4xl md:text-5xl text-[#193A3F] mb-2" data-node="dest_3_number" data-node-type="text" data-node-label="Destination 3 Number" data-node-default="03">
            {{dest_3_number}}
          </p>

          <h3 class="text-lg font-semibold text-[#193A3F] mb-2" data-node="dest_3_title" data-node-type="text" data-node-label="Destination 3 Title" data-node-default="Osaka">
            {{dest_3_title}}
          </h3>

          <p class="text-sm text-[#7E7E7E] leading-relaxed max-w-md" data-node="dest_3_desc" data-node-type="textarea" data-node-label="Destination 3 Description" data-node-default="The food capital of Japan, known for vibrant street eats, lively entertainment districts, and warm, welcoming locals.">
            {{dest_3_desc}}
          </p>
        </div>

      </div>
    </div>

  </div>
</section>