<section data-component-type="Gallery" class="w-full pt-0 md:pt-[180px] pb-20 px-[24px] lg:py-16 lg:px-10 md:py-2.5 md:px-6 sm:px-4" data-component-slug="clothing-template-brand-proof">
  

  <div class="max-w-[1728px] mx-auto flex flex-col gap-10">
    <h2 class="text-[#868686] text-[24px] md:text-[32px] lg:text-[45px] leading-tight" data-node="brand_quote" data-node-type="text" data-node-label="Brand Quote" data-node-default="Step into the world of modern street style made for everyday hustlers, designed to upgrade the way you wear and represent.">
      {{brand_quote}}
    </h2>

    <div class="flex items-center gap-4 flex-wrap">
      <div data-node="brand_avatars" data-node-type="file" data-node-label="Brand Avatars" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744594/seltrix/templates/clothing-template/Frame%20313.png">
        <img src="{{brand_avatars}}" alt="People" class="h-8 w-auto block">
      </div>

      <div class="flex items-center gap-2 text-xl md:text-2xl lg:text-[32px] font-medium">
        <span data-node="brand_rating" data-node-type="text" data-node-default="4.5/5">
          {{brand_rating}}
        </span>
        <img src="{{brand_star}}" data-node="brand_star" data-node-type="file" data-node-label="Star Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766994443/seltrix/templates/clothing-template/star.svg" alt="Star" class="w-6 h-6">
      </div>
    </div>

    <p class="text-sm md:text-base lg:text-2xl leading-relaxed text-[#636363] max-w-[780px]" data-node="brand_desc" data-node-type="text" data-node-label="Brand Description" data-node-default="Rated by the crew that lives and breathes street style. Trusted by trendsetters who flex it daily.">
      {{brand_desc}}
    </p>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-16 mt-5">
      <div class="flex flex-col gap-2.5 text-left w-fit">
        <div class="title-stroke font-black text-[20px] md:text-[22px] lg:text-[25px] text-[#193a3f]" data-node="stat_1_num" data-node-type="text" data-node-default="150+">
          {{stat_1_num}}
        </div>
        <div class="text-sm md:text-base lg:text-xl text-[#193a3f] whitespace-nowrap" data-node="stat_1_label" data-node-type="text" data-node-default="Fresh Styles">
          {{stat_1_label}}
        </div>
      </div>

      <div class="flex flex-col gap-2.5 text-left w-fit">
        <div class="title-stroke font-black text-[20px] md:text-[22px] lg:text-[25px] text-[#193a3f]" data-node="stat_2_num" data-node-type="text" data-node-default="25+">
          {{stat_2_num}}
        </div>
        <div class="text-sm md:text-base lg:text-xl text-[#193a3f] whitespace-nowrap" data-node="stat_2_label" data-node-type="text" data-node-default="New Drops">
          {{stat_2_label}}
        </div>
      </div>

      <div class="flex flex-col gap-2.5 text-left w-fit">
        <div class="title-stroke font-black text-[20px] md:text-[22px] lg:text-[25px] text-[#193a3f]" data-node="stat_3_num" data-node-type="text" data-node-default="12">
          {{stat_3_num}}
        </div>
        <div class="text-sm md:text-base lg:text-xl text-[#193a3f] whitespace-nowrap" data-node="stat_3_label" data-node-type="text" data-node-default="City Reach">
          {{stat_3_label}}
        </div>
      </div>

      <div class="flex flex-col gap-2.5 text-left w-fit">
        <div class="title-stroke font-black text-[20px] md:text-[22px] lg:text-[25px] text-[#193a3f]" data-node="stat_4_num" data-node-type="text" data-node-default="40+">
          {{stat_4_num}}
        </div>
        <div class="text-sm md:text-base lg:text-xl text-[#193a3f] whitespace-nowrap" data-node="stat_4_label" data-node-type="text" data-node-default="Daily Fits">
          {{stat_4_label}}
        </div>
      </div>
    </div>
  </div>
</section>