<section class="bg-[#FDFDF9] py-20 px-5" data-component-type="Content" data-component-slug="ss-photography-creative-force">
  <div class="max-w-[1400px] mx-auto">
    <!-- Heading Section -->
    <div class="mb-12">
      {{#if team_label}}
      <span class="block font-sans text-xs md:text-sm uppercase tracking-widest text-[#999999] mb-4">
        <span data-node="team_label" data-node-type="text" data-node-label="Section Label" data-node-default="OUR TEAM">{{team_label}}</span>
      </span>
      {{/if}} {{#if team_heading}}
      <h2 class="font-['Cormorant',_serif] text-4xl md:text-5xl text-[#1A1A1A]">
        <span data-node="team_heading" data-node-type="text" data-node-label="Heading" data-node-default="Creative Force">{{team_heading}}</span>
      </h2>
      {{/if}}
    </div>

    <!-- Team Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
      <!-- Member 1 -->
      <div class="relative group aspect-square overflow-hidden rounded-sm bg-[#E5E5E5]">
        {{#if team_image_1}}
        <img src="{{team_image_1}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Team Member 1" data-node="team_image_1" data-node-type="file" data-node-label="Member Image 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440895/seltrix/templates/ss-photography/cf-1.svg">
        {{/if}}
        <!-- Overlay -->
        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-90 flex flex-col justify-end p-6 transition-opacity duration-300">
          {{#if team_name_1}}
          <h3 class="font-['Cormorant',_serif] text-xl md:text-2xl text-white mb-1">
            <span data-node="team_name_1" data-node-type="text" data-node-label="Name 1" data-node-default="Carter Botosh">{{team_name_1}}</span>
          </h3>
          {{/if}} {{#if team_role_1}}
          <p class="font-sans text-xs text-white/70 uppercase tracking-widest">
            <span data-node="team_role_1" data-node-type="text" data-node-label="Role 1" data-node-default="Visual Producer">{{team_role_1}}</span>
          </p>
          {{/if}}
        </div>
      </div>

      <!-- Member 2 -->
      <div class="relative group aspect-square overflow-hidden rounded-sm bg-[#E5E5E5]">
        {{#if team_image_2}}
        <img src="{{team_image_2}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Team Member 2" data-node="team_image_2" data-node-type="file" data-node-label="Member Image 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440898/seltrix/templates/ss-photography/cf-2.svg">
        {{/if}}
        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-90 flex flex-col justify-end p-6 transition-opacity duration-300">
          {{#if team_name_2}}
          <h3 class="font-['Cormorant',_serif] text-xl md:text-2xl text-white mb-1">
            <span data-node="team_name_2" data-node-type="text" data-node-label="Name 2" data-node-default="Livia Saris">{{team_name_2}}</span>
          </h3>
          {{/if}} {{#if team_role_2}}
          <p class="font-sans text-xs text-white/70 uppercase tracking-widest">
            <span data-node="team_role_2" data-node-type="text" data-node-label="Role 2" data-node-default="Creative Strategist">{{team_role_2}}</span>
          </p>
          {{/if}}
        </div>
      </div>

      <!-- Member 3 -->
      <div class="relative group aspect-square overflow-hidden rounded-sm bg-[#E5E5E5]">
        {{#if team_image_3}}
        <img src="{{team_image_3}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Team Member 3" data-node="team_image_3" data-node-type="file" data-node-label="Member Image 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440900/seltrix/templates/ss-photography/cf-3.svg">
        {{/if}}
        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-90 flex flex-col justify-end p-6 transition-opacity duration-300">
          {{#if team_name_3}}
          <h3 class="font-['Cormorant',_serif] text-xl md:text-2xl text-white mb-1">
            <span data-node="team_name_3" data-node-type="text" data-node-label="Name 3" data-node-default="Zaire Workman">{{team_name_3}}</span>
          </h3>
          {{/if}} {{#if team_role_3}}
          <p class="font-sans text-xs text-white/70 uppercase tracking-widest">
            <span data-node="team_role_3" data-node-type="text" data-node-label="Role 3" data-node-default="Retouch Specialist">{{team_role_3}}</span>
          </p>
          {{/if}}
        </div>
      </div>

      <!-- Member 4 -->
      <div class="relative group aspect-square overflow-hidden rounded-sm bg-[#E5E5E5]">
        {{#if team_image_4}}
        <img src="{{team_image_4}}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Team Member 4" data-node="team_image_4" data-node-type="file" data-node-label="Member Image 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767440903/seltrix/templates/ss-photography/cf-4.svg">
        {{/if}}
        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-90 flex flex-col justify-end p-6 transition-opacity duration-300">
          {{#if team_name_4}}
          <h3 class="font-['Cormorant',_serif] text-xl md:text-2xl text-white mb-1">
            <span data-node="team_name_4" data-node-type="text" data-node-label="Name 4" data-node-default="Rayna Vaccaro">{{team_name_4}}</span>
          </h3>
          {{/if}} {{#if team_role_4}}
          <p class="font-sans text-xs text-white/70 uppercase tracking-widest">
            <span data-node="team_role_4" data-node-type="text" data-node-label="Role 4" data-node-default="Production Coordinator">{{team_role_4}}</span>
          </p>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</section>