<section data-component-type="Content" class="w-full bg-[#FAFAF5]  pb-[140px] px-[16px] sm:px-[24px] lg:px-[96px]" data-component-slug="history-template-discover-egypt">
  

  <!-- CENTER CONTAINER -->
  <div class="max-w-[1728px] mx-auto">
    <div class="wonders-box px-[32px] sm:px-[48px] py-[72px] flex flex-col items-center">

      <!-- DISCOVER EGYPT -->
      <div class="discover-pill flex items-center justify-center text-[16px] font-['Albert_Sans'] px-[24px] py-[10px] mb-6" data-node="discover_label" data-node-type="text" data-node-default="Discover Egypt’s">
        {{discover_label}}
      </div>

      <!-- TITLE -->
      <h2 class="font-['Orbitron'] text-white text-[32px] sm:text-[40px] lg:text-[48px] leading-[100%] text-center mb-10" data-node="wonders_title" data-node-type="text" data-node-default="Wonders Beyond the Pyramids">
        {{wonders_title}}
      </h2>

      <!-- TAG GRID -->
      <div class="flex flex-wrap justify-center gap-x-6 gap-y-4 max-w-[1100px]">

        <!-- TAG 1 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]" data-node="tag_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046258/seltrix/templates/history-template/discover-icon.svg">
          <span class="font-['Albert_Sans'] text-[24px]" data-node="tag_1" data-node-type="text" data-node-default="History">
            {{tag_1}}
          </span>
        </div>

        <!-- TAG 2 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_2" data-node-type="text" data-node-default="Culture">
            {{tag_2}}
          </span>
        </div>

        <!-- TAG 3 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_3" data-node-type="text" data-node-default="Traditions">
            {{tag_3}}
          </span>
        </div>

        <!-- TAG 4 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_4" data-node-type="text" data-node-default="Wonders">
            {{tag_4}}
          </span>
        </div>

        <!-- TAG 5 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_5" data-node-type="text" data-node-default="Legends">
            {{tag_5}}
          </span>
        </div>

        <!-- TAG 6 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_6" data-node-type="text" data-node-default="Art">
            {{tag_6}}
          </span>
        </div>

        <!-- TAG 7 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_7" data-node-type="text" data-node-default="Monuments">
            {{tag_7}}
          </span>
        </div>

        <!-- TAG 8 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_8" data-node-type="text" data-node-default="Stories">
            {{tag_8}}
          </span>
        </div>

        <!-- TAG 9 -->
        <div class="wonders-tag flex items-center gap-3 px-[24px] py-[10px]">
          <img src="{{tag_icon}}" class="w-[20px] h-[20px]">
          <span data-node="tag_9" data-node-type="text" data-node-default="Legacy">
            {{tag_9}}
          </span>
        </div>

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