<section data-component-type="Content" class="w-full pt-0 pb-[100px] px-[24px] lg:px-10 md:py-5 md:px-5 sm:px-4 bg-white border-b-2 border-[#dcdcdc]" data-component-slug="clothing-template-membership-value">
  

  <!-- Hero Image -->
  <div class="w-full rounded-2xl overflow-hidden mb-[60px]">
    <img src="{{membership_image}}" data-node="membership_image" data-node-type="file" data-node-label="Membership Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744593/seltrix/templates/clothing-template/Frame%20%288%29.webp" alt="Membership Visual" class="w-full h-auto block rounded-2xl">
  </div>

  <!-- Content Grid -->
  <div class="grid grid-cols-[1.2fr_1fr] lg:grid-cols-1 gap-[60px] items-stretch border-b-2 border-[#dcdcdc] pb-10">
    <!-- Left -->
    <div class="flex flex-col justify-between h-full lg:gap-8">
      <h2 class="title-stroke font-black text-[48px] md:text-[34px] leading-[56px] md:leading-[44px] mb-8 md:mb-1.5" data-node="membership_title" data-node-type="text" data-node-label="Membership Title" data-node-default="Join the squad that leads the culture, sets the trends, and owns every street.">
        {{membership_title}}
      </h2>
      <p class="text-2xl md:text-xl text-[#919396] max-w-[680px] mt-auto" data-node="membership_description" data-node-type="text" data-node-label="Membership Description" data-node-default="Membership isn't just a sign-up, it's your entry into the drip ecosystem. More access, more style, more moments to flex.">
        {{membership_description}}
      </p>
    </div>

    <!-- Right -->
    <div class="border-l-2 lg:border-l-0 lg:border-t-2 border-[#dcdcdc] pl-12 lg:pl-0 lg:pt-10 flex flex-col">
      <!-- Benefit 1 -->
      <div class="py-8 border-b-2 border-[#dcdcdc]">
        <h4 class="title-stroke font-black text-[32px] md:text-[26px] leading-[134%] mb-3" data-node="benefit_1_title" data-node-type="text" data-node-default="Fresh Fits Guaranteed">
          {{benefit_1_title}}
        </h4>
        <p class="text-2xl md:text-xl text-[#717c8c] max-w-[600px]" data-node="benefit_1_desc" data-node-type="text" data-node-default="Curated new drops tailored to your vibe. Stay updated, stay unstoppable. Your feed stays fresh every single week.">
          {{benefit_1_desc}}
        </p>
      </div>

      <!-- Benefit 2 -->
      <div class="py-8 border-b-2 border-[#dcdcdc]">
        <h4 class="title-stroke font-black text-[32px] md:text-[26px] leading-[134%] mb-3" data-node="benefit_2_title" data-node-type="text" data-node-default="Exclusive Rewards">
          {{benefit_2_title}}
        </h4>
        <p class="text-2xl md:text-xl text-[#717c8c] max-w-[600px]" data-node="benefit_2_desc" data-node-type="text" data-node-default="Points, perks, and limited offers unlocked only for members. Your loyalty pays off in style.">
          {{benefit_2_desc}}
        </p>
      </div>

      <!-- Benefit 3 -->
      <div class="py-8 border-b-2 border-[#dcdcdc]">
        <h4 class="title-stroke font-black text-[32px] md:text-[26px] leading-[134%] mb-3" data-node="benefit_3_title" data-node-type="text" data-node-default="Community First">
          {{benefit_3_title}}
        </h4>
        <p class="text-2xl md:text-xl text-[#717c8c] max-w-[600px]" data-node="benefit_3_desc" data-node-type="text" data-node-default="Get invited to events, meetups, and offline store previews. Become part of the culture.Your circle gets tighter, your style gets louder.">
          {{benefit_3_desc}}
        </p>
      </div>

      <!-- Benefit 4 -->
      <div class="py-8 pb-0">
        <h4 class="title-stroke font-black text-[32px] md:text-[26px] leading-[134%] mb-3" data-node="benefit_4_title" data-node-type="text" data-node-default="Premium Experience">
          {{benefit_4_title}}
        </h4>
        <p class="text-2xl md:text-xl text-[#717c8c] max-w-[600px]" data-node="benefit_4_desc" data-node-type="text" data-node-default="Smooth support, fast updates, and a hassle-free shopping flow. Your flex deserves nothing less.">
          {{benefit_4_desc}}
        </p>
      </div>
    </div>
  </div>
</section>