<section class="bg-[#FDFDF9] font-['Cormorant',_serif] py-20 px-5" data-component-type="Content" data-component-slug="ss-photography-team">
  <div class="max-w-[1400px] mx-auto">
    <!-- Heading -->
    <h2 class="text-3xl md:text-4xl text-[#1A1A1A] mb-12">
      <span data-node="heading" data-node-type="text" data-node-label="Heading" data-node-default="Professional Team">{{heading}}</span>
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
      <!-- Member 1 -->
      <div class="flex flex-col text-center">
        <div class="relative w-full aspect-[3/4] overflow-hidden mb-6">
          <img data-node="image_1" data-node-type="file" data-node-label="Member Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440976/seltrix/templates/ss-photography/team-1.svg" src="{{image_1}}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" alt="Team Member 1">
        </div>
        <h3 class="text-xl text-[#1A1A1A] mb-1">
          <span data-node="name_1" data-node-type="text" data-node-label="Name 1" data-node-default="Sadako Smith">{{name_1}}</span>
        </h3>
        <p class="text-sm font-sans text-[#666666] uppercase tracking-wider">
          <span data-node="role_1" data-node-type="text" data-node-label="Role 1" data-node-default="CEO">{{role_1}}</span>
        </p>
      </div>

      <!-- Member 2 -->
      <div class="flex flex-col text-center">
        <div class="relative w-full aspect-[3/4] overflow-hidden mb-6">
          <img data-node="image_2" data-node-type="file" data-node-label="Member Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440979/seltrix/templates/ss-photography/team-2.svg" src="{{image_2}}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" alt="Team Member 2">
        </div>
        <h3 class="text-xl text-[#1A1A1A] mb-1">
          <span data-node="name_2" data-node-type="text" data-node-label="Name 2" data-node-default="Jason Mitchel">{{name_2}}</span>
        </h3>
        <p class="text-sm font-sans text-[#666666] uppercase tracking-wider">
          <span data-node="role_2" data-node-type="text" data-node-label="Role 2" data-node-default="Art Director">{{role_2}}</span>
        </p>
      </div>

      <!-- Member 3 -->
      <div class="flex flex-col text-center">
        <div class="relative w-full aspect-[3/4] overflow-hidden mb-6">
          <img data-node="image_3" data-node-type="file" data-node-label="Member Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440981/seltrix/templates/ss-photography/team-3.svg" src="{{image_3}}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" alt="Team Member 3">
        </div>
        <h3 class="text-xl text-[#1A1A1A] mb-1">
          <span data-node="name_3" data-node-type="text" data-node-label="Name 3" data-node-default="Menna Attkins">{{name_3}}</span>
        </h3>
        <p class="text-sm font-sans text-[#666666] uppercase tracking-wider">
          <span data-node="role_3" data-node-type="text" data-node-label="Role 3" data-node-default="Photographer">{{role_3}}</span>
        </p>
      </div>

      <!-- Member 4 -->
      <div class="flex flex-col text-center">
        <div class="relative w-full aspect-[3/4] overflow-hidden mb-6">
          <img data-node="image_4" data-node-type="file" data-node-label="Member Image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440984/seltrix/templates/ss-photography/team-4.svg" src="{{image_4}}" class="w-full h-full object-cover transition-transform duration-700 hover:scale-105" alt="Team Member 4">
        </div>
        <h3 class="text-xl text-[#1A1A1A] mb-1">
          <span data-node="name_4" data-node-type="text" data-node-label="Name 4" data-node-default="Michael Lee">{{name_4}}</span>
        </h3>
        <p class="text-sm font-sans text-[#666666] uppercase tracking-wider">
          <span data-node="role_4" data-node-type="text" data-node-label="Role 4" data-node-default="Designer">{{role_4}}</span>
        </p>
      </div>
    </div>
  </div>
</section>