<section data-component-type="Gallery" class="w-full pt-0 pb-[100px] px-[24px] lg:px-10 md:py-20 md:px-5 sm:px-4 bg-white" data-component-slug="clothing-template-the-crew">
  

  <!-- Header -->
  <div class="text-center mb-20">
    <h2 class="title-stroke font-black text-[56px] md:text-[40px] leading-none mb-5" data-node="crew_title" data-node-type="text" data-node-label="Crew Title" data-node-default="The Crew Behind the Culture">
      {{crew_title}}
    </h2>
    <p class="max-w-[680px] mx-auto text-xl text-[#7e7e7e] leading-none" data-node="crew_subtitle" data-node-type="text" data-node-label="Crew Subtitle" data-node-default="Every detail, every stitch, every vibe—built by people who live the style.">
      {{crew_subtitle}}
    </p>
  </div>

  <!-- Grid -->
  <div class="grid grid-cols-4 lg:grid-cols-2 md:grid-cols-1 gap-12 lg:gap-10">
    <!-- Member 1 -->
    <div class="flex flex-col">
      <div class="w-full rounded-xl overflow-hidden mb-5">
        <img src="{{crew_1_image}}" data-node="crew_1_image" data-node-type="file" data-node-label="Member Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744563/seltrix/templates/clothing-template/Aarav.webp" alt="Crew Member" class="w-full h-auto block rounded-xl">
      </div>
      <div class="text-2xl leading-none mb-2 text-black" data-node="crew_1_name" data-node-type="text" data-node-default="Aarav Malhotra">
        {{crew_1_name}}
      </div>
      <div class="text-base leading-none text-[#7e7e7e]" data-node="crew_1_role" data-node-type="text" data-node-default="Creative Director">
        {{crew_1_role}}
      </div>
    </div>

    <!-- Member 2 -->
    <div class="flex flex-col">
      <div class="w-full rounded-xl overflow-hidden mb-5">
        <img src="{{crew_2_image}}" data-node="crew_2_image" data-node-type="file" data-node-label="Member Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744615/seltrix/templates/clothing-template/Luca.webp" class="w-full h-auto block rounded-xl">
      </div>
      <div class="text-2xl leading-none mb-2 text-black" data-node="crew_2_name" data-node-type="text" data-node-default="Luca Moretti">
        {{crew_2_name}}
      </div>
      <div class="text-base leading-none text-[#7e7e7e]" data-node="crew_2_role" data-node-type="text" data-node-default="Lead Fashion Designer">
        {{crew_2_role}}
      </div>
    </div>

    <!-- Member 3 -->
    <div class="flex flex-col">
      <div class="w-full rounded-xl overflow-hidden mb-5">
        <img src="{{crew_3_image}}" data-node="crew_3_image" data-node-type="file" data-node-label="Member Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744564/seltrix/templates/clothing-template/Aaron.webp" class="w-full h-auto block rounded-xl">
      </div>
      <div class="text-2xl leading-none mb-2 text-black" data-node="crew_3_name" data-node-type="text" data-node-default="Aaron Wells">
        {{crew_3_name}}
      </div>
      <div class="text-base leading-none text-[#7e7e7e]" data-node="crew_3_role" data-node-type="text" data-node-default="Brand Experience Manager">
        {{crew_3_role}}
      </div>
    </div>

    <!-- Member 4 -->
    <div class="flex flex-col">
      <div class="w-full rounded-xl overflow-hidden mb-5">
        <img src="{{crew_4_image}}" data-node="crew_4_image" data-node-type="file" data-node-label="Member Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744619/seltrix/templates/clothing-template/Mikael.webp" class="w-full h-auto block rounded-xl">
      </div>
      <div class="text-2xl leading-none mb-2 text-black" data-node="crew_4_name" data-node-type="text" data-node-default="Mikael Sørensen">
        {{crew_4_name}}
      </div>
      <div class="text-base leading-none text-[#7e7e7e]" data-node="crew_4_role" data-node-type="text" data-node-default="Production & Quality Lead">
        {{crew_4_role}}
      </div>
    </div>
  </div>
</section>