<section class="bg-[#FBF7F3] px-6 py-12 lg:px-16 lg:py-16" data-component-type="Content" data-component-slug="ss-tourism-template-meet_our_team">

  <!-- Header -->
  <div class="max-w-[90%] mx-auto flex flex-col md:flex-row sm:items-center sm:justify-between mb-10">

    <h2 class="text-3xl lg:text-4xl font-serif text-[#000000] " data-node="team_section_title" data-node-type="text" data-node-label="Team Section Title" data-node-default="Meet our Team">
      {{team_section_title}}
    </h2>

    <a href="{{team_button_link}}" data-node="team_button_link" data-node-type="page_links" data-node-label="Team Button Link" data-node-default="#" class="mt-4 sm:mt-0 inline-block bg-[#143C40] text-center text-white px-6 py-3 text-sm hover:bg-[#0F3134] transition w-[100px] md:w-[200px] ">
      <span data-node="team_button_text" data-node-type="text" data-node-label="Team Button Text" data-node-default="Explore">
        {{team_button_text}}
      </span>
    </a>
  </div>

  <!-- Team Grid -->
  <div class="max-w-[90%] mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 border-b pb-[50px]">

    <!-- Team Member 1 -->
    <div class="space-y-4">
      <img src="{{team_1_image}}" data-node="team_1_image" data-node-type="file" data-node-label="Team Member 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740007/seltrix/templates/ss-tourism-template/team1.png" alt="Team Member 1" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="team_1_role" data-node-type="text" data-node-label="Team Member 1 Role" data-node-default="Destination Expert">
          {{team_1_role}}
        </h4>
        <p class="text-sm text-gray-600" data-node="team_1_name" data-node-type="text" data-node-label="Team Member 1 Name" data-node-default="Aiko Tanaka">
          {{team_1_name}}
        </p>
      </div>
    </div>

    <!-- Team Member 2 -->
    <div class="space-y-4">
      <img src="{{team_2_image}}" data-node="team_2_image" data-node-type="file" data-node-label="Team Member 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740008/seltrix/templates/ss-tourism-template/team2.png" alt="Team Member 2" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="team_2_role" data-node-type="text" data-node-label="Team Member 2 Role" data-node-default="Experience Curator">
          {{team_2_role}}
        </h4>
        <p class="text-sm text-gray-600" data-node="team_2_name" data-node-type="text" data-node-label="Team Member 2 Name" data-node-default="Daniel Brooks">
          {{team_2_name}}
        </p>
      </div>
    </div>

    <!-- Team Member 3 -->
    <div class="space-y-4">
      <img src="{{team_3_image}}" data-node="team_3_image" data-node-type="file" data-node-label="Team Member 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740010/seltrix/templates/ss-tourism-template/team3.png" alt="Team Member 3" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="team_3_role" data-node-type="text" data-node-label="Team Member 3 Role" data-node-default="Guest Support Lead">
          {{team_3_role}}
        </h4>
        <p class="text-sm text-gray-600" data-node="team_3_name" data-node-type="text" data-node-label="Team Member 3 Name" data-node-default="Haru Nakamura">
          {{team_3_name}}
        </p>
      </div>
    </div>

    <!-- Team Member 4 -->
    <div class="space-y-4">
      <img src="{{team_4_image}}" data-node="team_4_image" data-node-type="file" data-node-label="Team Member 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766740011/seltrix/templates/ss-tourism-template/team4.png" alt="Team Member 4" class="w-full h-[360px] object-cover">
      <div>
        <h4 class="font-semibold text-#000000" data-node="team_4_role" data-node-type="text" data-node-label="Team Member 4 Role" data-node-default="Culinary Guide">
          {{team_4_role}}
        </h4>
        <p class="text-sm text-gray-600" data-node="team_4_name" data-node-type="text" data-node-label="Team Member 4 Name" data-node-default="Sarah Bennett">
          {{team_4_name}}
        </p>
      </div>
    </div>

  </div>
</section>