<section data-component-type="Content" class="w-full py-5 pb-[60px] px-[24px] lg:py-20 lg:px-10 md:py-0 md:px-6 sm:px-4 bg-white" data-component-slug="clothing-template-unlock-drip">
  

  <div class="max-w-[1728px] mx-auto">
    <!-- Header -->
    <div class="flex lg:flex-col justify-between items-start gap-[60px] lg:gap-8 mb-20 md:mb-[30px]">
      <h2 class="title-stroke font-black text-[64px] lg:text-[48px] md:text-[36px] leading-none max-w-[520px]" data-node="unlock_title" data-node-type="text" data-node-label="Unlock Title" data-node-default="Unlock the Drip.">
        {{unlock_title}}
      </h2>
      <p class="text-xl md:text-base leading-[26px] max-w-[620px]" data-node="unlock_desc" data-node-type="text" data-node-label="Unlock Description" data-node-default="Step into a world built for real ones, early drops, bigger perks, and premium flex only members get.">
        {{unlock_desc}}
      </p>
    </div>

    <!-- Grid -->
    <div class="grid grid-cols-3 lg:grid-cols-1 gap-8">
      <!-- Box 1 -->
      <div class="w-full min-h-[190px] border border-[#dcdcdc] rounded-2xl p-[30px_39px] flex flex-col gap-4">
        <h4 class="text-2xl md:text-xl leading-none" data-node="box_1_title" data-node-type="text" data-node-default="Early Drop Access">
          {{box_1_title}}
        </h4>
        <p class="text-xl md:text-base leading-[26px] text-black" data-node="box_1_desc" data-node-type="text" data-node-default="Beat the crowd every time with first picks on new releases. Stay ahead, stay exclusive.">
          {{box_1_desc}}
        </p>
      </div>

      <!-- Box 2 -->
      <div class="w-full min-h-[190px] border border-[#dcdcdc] rounded-2xl p-[30px_39px] flex flex-col gap-4">
        <h4 class="text-2xl md:text-xl leading-none" data-node="box_2_title" data-node-type="text" data-node-default="Member-Only Prices">
          {{box_2_title}}
        </h4>
        <p class="text-xl md:text-base leading-[26px] text-black" data-node="box_2_desc" data-node-type="text" data-node-default="Score limited deals on fits, collabs, and seasonal heat. More style, less spend.">
          {{box_2_desc}}
        </p>
      </div>

      <!-- Box 3 -->
      <div class="w-full min-h-[190px] border border-[#dcdcdc] rounded-2xl p-[30px_39px] flex flex-col gap-4">
        <h4 class="text-2xl md:text-xl leading-none" data-node="box_3_title" data-node-type="text" data-node-default="Priority Support">
          {{box_3_title}}
        </h4>
        <p class="text-xl md:text-base leading-[26px] text-black" data-node="box_3_desc" data-node-type="text" data-node-default="Get faster help, size swaps, and updates. Because your style shouldn't wait.">
          {{box_3_desc}}
        </p>
      </div>
    </div>
  </div>
</section>