<section class="bg-[#F6FBFF] py-2 sm:py-14" data-component-type="Content" data-component-slug="real-estate-template-Greenview">
  <div class="max-w-[90%] mx-auto bg-[#FFFFFF] rounded-2xl p-6 sm:p-10 lg:p-14">

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

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

        <!-- TITLE -->
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-black" data-node="property_title" data-node-type="text" data-node-label="Property Title" data-node-default="Greenview Residency">
          {{property_title}}
        </h2>

        <!-- DESCRIPTION -->
        <p class="text-sm sm:text-base text-[#6C6C6C] max-w-xl" data-node="property_description" data-node-type="textarea" data-node-label="Property Description" data-node-default="A serene community surrounded by lush landscapes and fresh, open spaces.">
          {{property_description}}
        </p>

        <!-- FEATURES -->
        <div class="grid grid-cols-2 gap-y-6 gap-x-10 pt-6">

          <span class="text-base sm:text-lg font-medium text-black" data-node="property_feature_1" data-node-type="text" data-node-label="Feature 1" data-node-default="Balconies">
            {{property_feature_1}}
          </span>

          <span class="text-base sm:text-lg font-medium text-black" data-node="property_feature_2" data-node-type="text" data-node-label="Feature 2" data-node-default="Interiors">
            {{property_feature_2}}
          </span>

          <span class="text-base sm:text-lg font-medium text-black" data-node="property_feature_3" data-node-type="text" data-node-label="Feature 3" data-node-default="Connectivity">
            {{property_feature_3}}
          </span>

          <span class="text-base sm:text-lg font-medium text-black" data-node="property_feature_4" data-node-type="text" data-node-label="Feature 4" data-node-default="Eco-Living">
            {{property_feature_4}}
          </span>

        </div>
      </div>

      <!-- RIGHT IMAGE -->
      <div class="relative">
        <img src="{{property_image}}" alt="Property Image" data-node="property_image" data-node-type="file" data-node-label="Property Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359357/seltrix/templates/real-estate-template/green1.png" class="w-full h-[220px] sm:h-[300px] lg:h-[380px] object-cover rounded-2xl">
      </div>

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