<section data-component-type="Content" class="membership-value-section">
  <style>
    .membership-value-section {
      width: 100%;
      padding: 0px 100px 100px;
      background: #ffffff;
      border-bottom: 2px solid #dcdcdc; /* ✅ Section bottom border */
    }

    .membership-image {
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 60px;
    }

    .membership-image img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 16px;
    }

    .membership-content {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      align-items: stretch;
    }

    .membership-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .membership-left h2 {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 48px;
      line-height: 56px;
      margin-bottom: 32px;
    }

    .membership-left p {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      color: #919396;
      max-width: 680px;
    }

    .membership-right {
      border-left: 2px solid #dcdcdc;
      padding-left: 48px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .benefit-item {
      padding: 32px 0;
      border-bottom: 2px solid #dcdcdc;
    }

    .benefit-item:last-child {
      border-bottom: none;
      padding-bottom: 0px;
    }

    .benefit-item h4 {
      font-family: "Rajdhani", sans-serif;
      font-style: italic;
      font-weight: 900;
      font-size: 32px;
      line-height: 134%;
      margin-bottom: 12px;
    }

    .benefit-item p {
      font-family: "Michroma", sans-serif;
      font-size: 24px;
      letter-spacing: -2%;
      color: #717c8c;
      max-width: 600px;
    }

    @media (max-width: 1024px) {
      .membership-content {
        grid-template-columns: 1fr;
      }

      .membership-right {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid #dcdcdc;
        padding-top: 40px;
      }

      .membership-left {
        gap: 32px;
      }
    }

    @media (max-width: 768px) {
      .membership-value-section {
        padding: 20px 20px;
      }

      .membership-left h2 {
        font-size: 34px;
        line-height: 44px;
        margin-bottom: 5px;
      }

      .membership-left p,
      .benefit-item p {
        font-size: 20px;
      }

      .benefit-item h4 {
        font-size: 26px;
      }
    }

    .membership-content {
      border-bottom: 2px solid #dcdcdc;
      padding-bottom: 40px;
    }

    .membership-left {
      height: 100%;
    }

    .membership-left p {
      margin-top: auto;
    }
  </style>

  <div class="membership-image">
    <img
      src="{{membership_image}}"
      data-node="membership_image"
      data-node-type="file"
      data-node-default="../assets/Frame (8).webp"
      alt="Membership Visual"
    />
  </div>

  <div class="membership-content">
    <div class="membership-left">
      <h2
        data-node="membership_title"
        data-node-type="text"
        data-node-default="Join the squad that leads the culture, sets the trends, and owns every street."
      >
        {{membership_title}}
      </h2>

      <p
        data-node="membership_description"
        data-node-type="text"
        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>

    <div class="membership-right">
      <div class="benefit-item">
        <h4
          data-node="benefit_1_title"
          data-node-type="text"
          data-node-default="Fresh Fits Guaranteed"
        >
          {{benefit_1_title}}
        </h4>
        <p
          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>

      <div class="benefit-item">
        <h4
          data-node="benefit_2_title"
          data-node-type="text"
          data-node-default="Exclusive Rewards"
        >
          {{benefit_2_title}}
        </h4>
        <p
          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>

      <div class="benefit-item">
        <h4
          data-node="benefit_3_title"
          data-node-type="text"
          data-node-default="Community First"
        >
          {{benefit_3_title}}
        </h4>
        <p
          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>

      <div class="benefit-item">
        <h4
          data-node="benefit_4_title"
          data-node-type="text"
          data-node-default="Premium Experience"
        >
          {{benefit_4_title}}
        </h4>
        <p
          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>
