<section id="team-grid" data-component-type="Content" class="bg-white py-16 lg:py-24" data-component-slug="ss-dental-team-grid">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Team Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
      <!-- Doctor 1 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_1_image" data-node-type="file" data-node-label="Doctor 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053611/seltrix/templates/ss-dental-template/team-1.png" src="{{doctor_1_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_1_name" data-node-type="text" data-node-label="Doctor 1 Name" data-node-default="Dr. Lily Blooms" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_1_name}}
        </h3>
        <p data-node="doctor_1_role" data-node-type="text" data-node-label="Doctor 1 Role" data-node-default="Head of Internal Medicine" class="text-[#617280] text-sm">
          {{doctor_1_role}}
        </p>
      </div>

      <!-- Doctor 2 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_2_image" data-node-type="file" data-node-label="Doctor 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053612/seltrix/templates/ss-dental-template/team-2.png" src="{{doctor_2_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_2_name" data-node-type="text" data-node-label="Doctor 2 Name" data-node-default="Dr. Michael Anderson" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_2_name}}
        </h3>
        <p data-node="doctor_2_role" data-node-type="text" data-node-label="Doctor 2 Role" data-node-default="Head of Cardiology" class="text-[#617280] text-sm">
          {{doctor_2_role}}
        </p>
      </div>

      <!-- Doctor 3 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_3_image" data-node-type="file" data-node-label="Doctor 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053613/seltrix/templates/ss-dental-template/team-3.png" src="{{doctor_3_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_3_name" data-node-type="text" data-node-label="Doctor 3 Name" data-node-default="Dr. Daniel Roberts" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_3_name}}
        </h3>
        <p data-node="doctor_3_role" data-node-type="text" data-node-label="Doctor 3 Role" data-node-default="Head of Orthopedics" class="text-[#617280] text-sm">
          {{doctor_3_role}}
        </p>
      </div>

      <!-- Doctor 4 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_4_image" data-node-type="file" data-node-label="Doctor 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053615/seltrix/templates/ss-dental-template/team-4.png" src="{{doctor_4_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_4_name" data-node-type="text" data-node-label="Doctor 4 Name" data-node-default="Dr. James Wilson" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_4_name}}
        </h3>
        <p data-node="doctor_4_role" data-node-type="text" data-node-label="Doctor 4 Role" data-node-default="Head of General Surgery" class="text-[#617280] text-sm">
          {{doctor_4_role}}
        </p>
      </div>

      <!-- Doctor 5 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_5_image" data-node-type="file" data-node-label="Doctor 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053616/seltrix/templates/ss-dental-template/team-5.png" src="{{doctor_5_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_5_name" data-node-type="text" data-node-label="Doctor 5 Name" data-node-default="Dr. Mary Joseph" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_5_name}}
        </h3>
        <p data-node="doctor_5_role" data-node-type="text" data-node-label="Doctor 5 Role" data-node-default="Head of Obstetrics & Gynecology" class="text-[#617280] text-sm">
          {{doctor_5_role}}
        </p>
      </div>

      <!-- Doctor 6 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_6_image" data-node-type="file" data-node-label="Doctor 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053618/seltrix/templates/ss-dental-template/team-6.png" src="{{doctor_6_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_6_name" data-node-type="text" data-node-label="Doctor 6 Name" data-node-default="Dr. Laura Bennett" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_6_name}}
        </h3>
        <p data-node="doctor_6_role" data-node-type="text" data-node-label="Doctor 6 Role" data-node-default="Head of Pediatrics" class="text-[#617280] text-sm">
          {{doctor_6_role}}
        </p>
      </div>

      <!-- Doctor 7 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_7_image" data-node-type="file" data-node-label="Doctor 7 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053618/seltrix/templates/ss-dental-template/team-7.png" src="{{doctor_7_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_7_name" data-node-type="text" data-node-label="Doctor 7 Name" data-node-default="Dr. Robert Klein" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_7_name}}
        </h3>
        <p data-node="doctor_7_role" data-node-type="text" data-node-label="Doctor 7 Role" data-node-default="Head of Neurology" class="text-[#617280] text-sm">
          {{doctor_7_role}}
        </p>
      </div>

      <!-- Doctor 8 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_8_image" data-node-type="file" data-node-label="Doctor 8 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053620/seltrix/templates/ss-dental-template/team-8.png" src="{{doctor_8_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_8_name" data-node-type="text" data-node-label="Doctor 8 Name" data-node-default="Dr. Thomas Miller" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_8_name}}
        </h3>
        <p data-node="doctor_8_role" data-node-type="text" data-node-label="Doctor 8 Role" data-node-default="Head of Emergency Medicine" class="text-[#617280] text-sm">
          {{doctor_8_role}}
        </p>
      </div>

      <!-- Doctor 9 -->
      <div class="group">
        <div class="overflow-hidden rounded-2xl mb-4 bg-gray-100">
          <img data-node="doctor_9_image" data-node-type="file" data-node-label="Doctor 9 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768053621/seltrix/templates/ss-dental-template/team-9.png" src="{{doctor_9_image}}" alt="Doctor" class="w-full h-auto aspect-[4/5] object-cover group-hover:scale-105 transition-transform duration-300">
        </div>
        <h3 data-node="doctor_9_name" data-node-type="text" data-node-label="Doctor 9 Name" data-node-default="Dr. Andrew Collins" class="text-lg font-semibold text-gray-900 mb-1">
          {{doctor_9_name}}
        </h3>
        <p data-node="doctor_9_role" data-node-type="text" data-node-label="Doctor 9 Role" data-node-default="Head of Anesthesiology" class="text-[#617280] text-sm">
          {{doctor_9_role}}
        </p>
      </div>
    </div>
  </div>
</section>