<section class="w-full px-4 md:px-12 lg:px-24 pb-24 md:pb-36 lg:pb-40 relative" data-component-type="Content">
  <!-- TEAM GRID -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-8 lg:gap-10 mt-12 md:mt-16">
    <!-- TEAM MEMBER 1 -->
    <div class="flex flex-col gap-3.5">
      <img
        src="{{team_1_image}}"
        class="w-full rounded-2xl h-[420px] md:h-[520px] object-cover"
        data-node="team_1_image"
        data-node-type="file"
        data-node-default="./assets/Ananya.webp"
      />

      <div
        class="font-['Cabin'] text-[24px] md:text-[36px] font-medium text-white"
        data-node="team_1_name"
        data-node-type="text"
        data-node-default="Ananya Rao, Creative Lead"
      >
        {{team_1_name}}
      </div>

      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] md:leading-[140%]"
        data-node="team_1_bio"
        data-node-type="textarea"
        data-node-default="Defines positioning, messaging frameworks, and brand direction that aligns creativity with business goals."
      >
        {{team_1_bio}}
      </p>
    </div>

    <!-- TEAM MEMBER 2 -->
    <div class="flex flex-col gap-3.5">
      <img
        src="{{team_2_image}}"
        class="w-full rounded-2xl h-[420px] md:h-[520px] object-cover"
        data-node="team_2_image"
        data-node-type="file"
        data-node-default="./assets/Meera.webp"
      />

      <div
        class="font-['Cabin'] text-[24px] md:text-[36px] font-medium text-white"
        data-node="team_2_name"
        data-node-type="text"
        data-node-default="Meera Collins, Content Strategist"
      >
        {{team_2_name}}
      </div>

      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] md:leading-[140%]"
        data-node="team_2_bio"
        data-node-type="textarea"
        data-node-default="Builds content ecosystems that rank, convert, and support long-term organic growth."
      >
        {{team_2_bio}}
      </p>
    </div>

    <!-- TEAM MEMBER 3 -->
    <div class="flex flex-col gap-3.5">
      <img
        src="{{team_3_image}}"
        class="w-full rounded-2xl h-[420px] md:h-[520px] object-cover"
        data-node="team_3_image"
        data-node-type="file"
        data-node-default="./assets/Daniel.webp"
      />

      <div
        class="font-['Cabin'] text-[24px] md:text-[36px] font-medium text-white"
        data-node="team_3_name"
        data-node-type="text"
        data-node-default="Daniel Foster, Account Manager"
      >
        {{team_3_name}}
      </div>

      <p
        class="font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%] md:leading-[140%]"
        data-node="team_3_bio"
        data-node-type="textarea"
        data-node-default="Handles paid media, funnels, and analytics with a strict focus on efficiency and ROI."
      >
        {{team_3_bio}}
      </p>
    </div>
  </div>
</section>
