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

  <div class="max-w-[90%] mx-auto px-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 text-center relative">

      <!-- Item 1 -->
      <div class="relative">
        <span class="absolute inset-x-0 lg:-top-[128px] -top-8 text-[#193A3F4D] lg:text-[#0F3D3E] text-[6rem] lg:text-[8rem] font-bold select-none opacity-20 z-0" data-node="destination_1_number" data-node-type="text" data-node-label="Destination 1 Number" data-node-default="01">
          {{destination_1_number}}
        </span>

        <div class="relative z-10 lg:bg-[#FBF8F3]">
          <h3 class="text-lg lg:text-xl font-semibold text-[#0F3D3E] pt-[30px] mb-2" data-node="destination_1_title" data-node-type="text" data-node-label="Destination 1 Title" data-node-default="Tokyo">
            {{destination_1_title}}
          </h3>

          <p class="text-sm lg:text-base text-gray-600" data-node="destination_1_desc" data-node-type="textarea" data-node-label="Destination 1 Description" data-node-default="A fast-moving city filled with culture, nightlife, and world-class dining.">
            {{destination_1_desc}}
          </p>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative">
        <span class="absolute inset-x-0 lg:-top-[128px] -top-8 text-[#193A3F4D] lg:text-[#0F3D3E] text-[6rem] lg:text-[8rem] font-bold select-none opacity-20 z-0" data-node="destination_2_number" data-node-type="text" data-node-label="Destination 2 Number" data-node-default="02">
          {{destination_2_number}}
        </span>

        <div class="relative z-10 lg:bg-[#FBF8F3]">
          <h3 class="text-lg lg:text-xl font-semibold text-[#0F3D3E] pt-[30px] mb-2" data-node="destination_2_title" data-node-type="text" data-node-label="Destination 2 Title" data-node-default="Kyoto">
            {{destination_2_title}}
          </h3>

          <p class="text-sm lg:text-base text-gray-600" data-node="destination_2_desc" data-node-type="textarea" data-node-label="Destination 2 Description" data-node-default="A serene cultural hub filled with temples, gardens, and centuries-old heritage.">
            {{destination_2_desc}}
          </p>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative">
        <span class="absolute inset-x-0 lg:-top-[128px] -top-8 text-[#193A3F4D] lg:text-[#0F3D3E] text-[6rem] lg:text-[8rem] font-bold select-none opacity-20 z-0" data-node="destination_3_number" data-node-type="text" data-node-label="Destination 3 Number" data-node-default="03">
          {{destination_3_number}}
        </span>

        <div class="relative z-10 lg:bg-[#FBF8F3]">
          <h3 class="text-lg lg:text-xl font-semibold text-[#0F3D3E] pt-[30px] mb-2" data-node="destination_3_title" data-node-type="text" data-node-label="Destination 3 Title" data-node-default="Osaka">
            {{destination_3_title}}
          </h3>

          <p class="text-sm lg:text-base text-gray-600" data-node="destination_3_desc" data-node-type="textarea" data-node-label="Destination 3 Description" data-node-default="Japan’s culinary hub, known for street food, fun districts, and warm hospitality.">
            {{destination_3_desc}}
          </p>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="relative">
        <span class="absolute inset-x-0 lg:-top-[128px] -top-8 text-[#193A3F4D] lg:text-[#0F3D3E] text-[6rem] lg:text-[8rem] font-bold select-none opacity-20 z-0" data-node="destination_4_number" data-node-type="text" data-node-label="Destination 4 Number" data-node-default="04">
          {{destination_4_number}}
        </span>

        <div class="relative z-10 lg:bg-[#FBF8F3]">
          <h3 class="text-lg lg:text-xl font-semibold text-[#0F3D3E] pt-[30px] mb-2" data-node="destination_4_title" data-node-type="text" data-node-label="Destination 4 Title" data-node-default="Hokkaido">
            {{destination_4_title}}
          </h3>

          <p class="text-sm lg:text-base text-gray-600" data-node="destination_4_desc" data-node-type="textarea" data-node-label="Destination 4 Description" data-node-default="A nature-rich region with wide-open views, hot springs, and seasonal beauty.">
            {{destination_4_desc}}
          </p>
        </div>
      </div>

    </div>
  </div>
</section>