<section data-component-type="Content" data-component-slug="ss-education-template-team_behind">
  <div class="bg-[#F6F6F6] py-14 px-4 sm:px-6 lg:px-16">
    <div class="max-w-[90%] mx-auto">

      <!-- HEADER -->
      <div class="flex flex-col lg:flex-row justify-between gap-6 mb-12">
        <h2 class="text-3xl sm:text-4xl font-bold max-w-xl" data-node="team_heading" data-node-type="text" data-node-label="Team Section Heading" data-node-default="The Team Behind Your Learning Journey">
          {{team_heading}}
        </h2>

        <p class="text-[#4A6673] max-w-md text-sm sm:text-base" data-node="team_description" data-node-type="text" data-node-label="Team Section Description" data-node-default="A passionate group of educators, strategists, and creators. Dedicated to helping you build skills that last.">
          {{team_description}}
        </p>
      </div>

      <!-- TEAM LIST -->
      <div class="space-y-6">

        <!-- CARD 01 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span class="text-2xl font-bold text-black" data-node="team_1_index" data-node-type="text" data-node-label="Team Member 1 Index" data-node-default="01">
              {{team_1_index}}
            </span>

            <div>
              <h3 class="text-lg sm:text-xl font-semibold mb-2" data-node="team_1_name" data-node-type="text" data-node-label="Team Member 1 Name" data-node-default="Elena Richter – Lead Academic Instructor">
                {{team_1_name}}
              </h3>

              <p class="text-[#3D3D3D] text-sm leading-relaxed" data-node="team_1_bio" data-node-type="text" data-node-label="Team Member 1 Description" data-node-default="Designs curriculum that blends clarity, depth, and real-world application.">
                {{team_1_bio}}
              </p>
            </div>
          </div>

          <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/v1766750771/seltrix/templates/ss-education-template/img1.png" class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg" alt>
        </div>

        <!-- CARD 02 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span class="text-2xl font-bold text-black" data-node="team_2_index" data-node-type="text" data-node-label="Team Member 2 Index" data-node-default="02">
              {{team_2_index}}
            </span>

            <div>
              <h3 class="text-lg sm:text-xl font-semibold mb-2" data-node="team_2_name" data-node-type="text" data-node-label="Team Member 2 Name" data-node-default="Sofia Mendes – Curriculum Strategist">
                {{team_2_name}}
              </h3>

              <p class="text-[#3D3D3D] text-sm leading-relaxed" data-node="team_2_bio" data-node-type="text" data-node-label="Team Member 2 Description" data-node-default="Transforms ideas into seamless learning pathways that motivate progress.">
                {{team_2_bio}}
              </p>
            </div>
          </div>

          <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/v1766750773/seltrix/templates/ss-education-template/img2.png" class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg" alt>
        </div>

        <!-- CARD 03 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span class="text-2xl font-bold text-black" data-node="team_3_index" data-node-type="text" data-node-label="Team Member 3 Index" data-node-default="03">
              {{team_3_index}}
            </span>

            <div>
              <h3 class="text-lg sm:text-xl font-semibold mb-2" data-node="team_3_name" data-node-type="text" data-node-label="Team Member 3 Name" data-node-default="Lena Ash – Student Community Director">
                {{team_3_name}}
              </h3>

              <p class="text-[#3D3D3D] text-sm leading-relaxed" data-node="team_3_bio" data-node-type="text" data-node-label="Team Member 3 Description" data-node-default="Builds a vibrant learner ecosystem across all channels.">
                {{team_3_bio}}
              </p>
            </div>
          </div>

          <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/v1766750775/seltrix/templates/ss-education-template/img3.png" class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg" alt>
        </div>

        <!-- CARD 04 -->
        <div class="bg-white rounded-xl p-6 sm:p-8 flex flex-col lg:flex-row items-center justify-between gap-6">

          <div class="flex items-start gap-6 max-w-xl">
            <span class="text-2xl font-bold text-black" data-node="team_4_index" data-node-type="text" data-node-label="Team Member 4 Index" data-node-default="04">
              {{team_4_index}}
            </span>

            <div>
              <h3 class="text-lg sm:text-xl font-semibold mb-2" data-node="team_4_name" data-node-type="text" data-node-label="Team Member 4 Name" data-node-default="Amara Ray – Learning Systems Designer">
                {{team_4_name}}
              </h3>

              <p class="text-[#3D3D3D] text-sm leading-relaxed" data-node="team_4_bio" data-node-type="text" data-node-label="Team Member 4 Description" data-node-default="Crafts intuitive interfaces that enhance every step of the journey.">
                {{team_4_bio}}
              </p>
            </div>
          </div>

          <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/v1766750776/seltrix/templates/ss-education-template/img4.png" class="w-full sm:w-[260px] h-[180px] object-cover rounded-lg" alt>
        </div>

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