<section class="bg-black text-white py-24" data-component-type="Content" data-component-slug="real-estate-template-crafted">
  <div class="max-w-[90%] mx-auto">

    <!-- GRID WRAPPER -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

      <!-- LEFT CONTENT -->
      <div class="space-y-8">

        <div class="max-w-xl">
          <h2 class="text-3xl sm:text-4xl lg:text-[40px] font-semibold lg:leading-[48px]" data-node="craft_section_title" data-node-type="text" data-node-label="Section Title" data-node-default="Crafted for Comfort & a Better Way of Living">
            {{craft_section_title}}
          </h2>

          <p class="mt-4 text-[#ACACAC] text-sm sm:text-base" data-node="craft_section_description" data-node-type="text" data-node-label="Section Description" data-node-default="Find communities that offer thoughtful amenities, greener environments, and seamless everyday comfort.">
            {{craft_section_description}}
          </p>
        </div>

        <!-- IMAGE -->
        <div class="overflow-hidden rounded-xl">
          <img src="{{craft_main_image}}" data-node="craft_main_image" data-node-type="file" data-node-label="Main Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359347/seltrix/templates/real-estate-template/craft1.png" alt="Architecture" class="w-full h-[260px] sm:h-[320px] lg:h-[360px] object-cover">
        </div>
      </div>

      <!-- RIGHT FEATURE CARDS -->
      <div class="space-y-6">

        <!-- FEATURE 1 -->
        <div class="border border-white/20 rounded-xl lg:p-[50px] md:p-[30px] p-[20px] bg-white/5 backdrop-blur-md">
          <div class="flex items-center gap-[40px]">

            <div class="w-[80px] h-[80px] flex items-center justify-center">
              <img src="{{craft_feature1_icon}}" data-node="craft_feature1_icon" data-node-type="file" data-node-label="Feature 1 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359364/seltrix/templates/real-estate-template/like-shapes.png" class="w-full object-cover">
            </div>

            <div>
              <h3 class="text-lg font-semibold" data-node="craft_feature1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Lifestyle Ready">
                {{craft_feature1_title}}
              </h3>

              <p class="mt-2 text-[#DCDCDC] text-sm" data-node="craft_feature1_desc" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Designed for effortless living with essentials within reach.">
                {{craft_feature1_desc}}
              </p>
            </div>

          </div>
        </div>

        <!-- FEATURE 2 -->
        <div class="border border-white/20 rounded-xl lg:p-[50px] md:p-[30px] p-[20px] bg-white/5 backdrop-blur-md">
          <div class="flex items-center gap-[40px]">

            <div class="w-[80px] h-[80px] flex items-center justify-center">
              <img src="{{craft_feature2_icon}}" data-node="craft_feature2_icon" data-node-type="file" data-node-label="Feature 2 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359386/seltrix/templates/real-estate-template/profile-2user%20copy.png" class="w-full object-cover">
            </div>

            <div>
              <h3 class="text-lg font-semibold" data-node="craft_feature2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Family Friendly">
                {{craft_feature2_title}}
              </h3>

              <p class="mt-2 text-[#DCDCDC] text-sm" data-node="craft_feature2_desc" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="Safe, inclusive spaces for all age groups to thrive.">
                {{craft_feature2_desc}}
              </p>
            </div>

          </div>
        </div>

        <!-- FEATURE 3 -->
        <div class="border border-white/20 rounded-xl lg:p-[50px] md:p-[30px] p-[20px] bg-white/5 backdrop-blur-md">
          <div class="flex items-center gap-[40px]">

            <div class="w-[80px] h-[80px] flex items-center justify-center">
              <img src="{{craft_feature3_icon}}" data-node="craft_feature3_icon" data-node-type="file" data-node-label="Feature 3 Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359376/seltrix/templates/real-estate-template/medal-star%20copy.png" class="w-full object-cover">
            </div>

            <div>
              <h3 class="text-lg font-semibold" data-node="craft_feature3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Value Assured">
                {{craft_feature3_title}}
              </h3>

              <p class="mt-2 text-[#DCDCDC] text-sm" data-node="craft_feature3_desc" data-node-type="text" data-node-label="Feature 3 Description" data-node-default="Properties built for long-term appreciation and stability.">
                {{craft_feature3_desc}}
              </p>
            </div>

          </div>
        </div>

      </div>
    </div>
  </div>
</section>