<section data-component-type="Content" 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-built-for-streets">
  

  <div class="grid grid-cols-[1.2fr_1fr] lg:grid-cols-1 gap-20 lg:gap-[60px] items-start">
    <!-- LEFT -->
    <div>
      <h2 class="title-stroke font-black text-[45px] md:text-[42px] leading-none text-black mb-10 max-w-[544px]" data-node="real_life_title" data-node-type="text" data-node-label="Section Title" data-node-default="Built for Streets, Designed for Real Life">
        {{real_life_title}}
      </h2>

      <div class="w-full rounded-xl overflow-hidden">
        <img src="{{real_life_image}}" data-node="real_life_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744626/seltrix/templates/clothing-template/Real%20Life.webp" alt="Built for Real Life" class="w-full h-auto block rounded-xl">
      </div>
    </div>

    <!-- RIGHT -->
    <div class="flex flex-col gap-10">
      <p class="text-2xl md:text-xl leading-[38px] text-[#7e7e7e] max-w-[736px]" data-node="mission_text" data-node-type="text" data-node-label="Mission Text" data-node-default="Our mission is simple—deliver fits that stay loud, last long, and feel right. Style isn't seasonal here. It's a lifestyle.">
        {{mission_text}}
      </p>

      <div class="flex flex-col gap-10">
        <!-- Feature 1 -->
        <div class="grid grid-cols-[14px_1fr] gap-7 items-center">
          <div class="w-1.5 h-[150px] bg-[#cbd5e1] rounded-xl"></div>
          <div>
            <h4 class="text-[32px] md:text-[26px] font-normal leading-none mb-3.5 text-black" data-node="feature_1_title" data-node-type="text" data-node-default="Quality Without Compromise">
              {{feature_1_title}}
            </h4>
            <p class="text-xl md:text-lg leading-[26px] text-[#7e7e7e] max-w-[660px]" data-node="feature_1_desc" data-node-type="text" data-node-default="Premium fabrics, clean finishes, details that hold up no matter the weather. Made for repeat fits.">
              {{feature_1_desc}}
            </p>
          </div>
        </div>

        <!-- Feature 2 (Active) -->
        <div class="grid grid-cols-[14px_1fr] gap-7 items-center">
          <div class="w-1.5 h-[150px] bg-black rounded-xl"></div>
          <div>
            <h4 class="text-[32px] md:text-[26px] font-normal leading-none mb-3.5 text-black" data-node="feature_2_title" data-node-type="text" data-node-default="Style That Speaks">
              {{feature_2_title}}
            </h4>
            <p class="text-xl md:text-lg leading-[26px] text-[#7e7e7e] max-w-[660px]" data-node="feature_2_desc" data-node-type="text" data-node-default="Silhouettes that turn sidewalks into runways. Every piece designed to show up and stand out.">
              {{feature_2_desc}}
            </p>
          </div>
        </div>

        <!-- Feature 3 -->
        <div class="grid grid-cols-[14px_1fr] gap-7 items-center">
          <div class="w-1.5 h-[150px] bg-[#cbd5e1] rounded-xl"></div>
          <div>
            <h4 class="text-[32px] md:text-[26px] font-normal leading-none mb-3.5 text-black" data-node="feature_3_title" data-node-type="text" data-node-default="Community at the Core">
              {{feature_3_title}}
            </h4>
            <p class="text-xl md:text-lg leading-[26px] text-[#7e7e7e] max-w-[660px]" data-node="feature_3_desc" data-node-type="text" data-node-default="Shaped by the people who wear us. Your vibe becomes our next drop.">
              {{feature_3_desc}}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>