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

  <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>
