<section class="bg-[#F6FBFF] py-16" data-component-type="Content" data-component-slug="real-estate-template-Premium_Interiors">
  <div class="max-w-[90%] mx-auto">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

      <!-- CARD 1 -->
      <div class="bg-black rounded-2xl overflow-hidden p-5 sm:p-6 flex flex-col justify-between">

        <!-- TOP CONTENT -->
        <div class="flex justify-between items-start gap-4">
          <div>
            <h3 class="text-white text-xl sm:text-2xl font-semibold" data-node="card1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="Premium Interiors">
              {{card1_title}}
            </h3>

            <p class="text-[#939393] text-sm sm:text-base mt-2 max-w-md" data-node="card1_description" data-node-type="textarea" data-node-label="Card 1 Description" data-node-default="Designed with contemporary aesthetics, natural light, and functional layouts that enhance daily living.">
              {{card1_description}}
            </p>
          </div>

          <!-- ICON LINK -->
          <a href="{{card1_link}}" data-node="card1_link" data-node-type="page_links" data-node-label="Card 1 Link" data-node-default="#">
            <div class="shrink-0">
              <div class="w-11 h-11 border border-white/80 rounded-lg flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7V17"/>
                </svg>
              </div>
            </div>
          </a>
        </div>

        <!-- IMAGE -->
        <div class="mt-6 rounded-xl overflow-hidden">
          <img src="{{card1_image}}" data-node="card1_image" data-node-type="file" data-node-label="Card 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359361/seltrix/templates/real-estate-template/interior1.png" alt="Premium Interior" class="w-full h-[220px] sm:h-[260px] lg:h-[300px] object-cover">
        </div>

      </div>

      <!-- CARD 2 -->
      <div class="bg-black rounded-2xl overflow-hidden p-5 sm:p-6 flex flex-col justify-between">

        <!-- TOP CONTENT -->
        <div class="flex justify-between items-start gap-4">
          <div>
            <h3 class="text-white text-xl sm:text-2xl font-semibold" data-node="card2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Thoughtful Spaces">
              {{card2_title}}
            </h3>

            <p class="text-[#939393] text-sm sm:text-base mt-2 max-w-md" data-node="card2_description" data-node-type="textarea" data-node-label="Card 2 Description" data-node-default="From cozy corners to expansive living areas, every room is created to feel warm, open, and beautifully efficient.">
              {{card2_description}}
            </p>
          </div>

          <!-- ICON LINK -->
          <a href="{{card2_link}}" data-node="card2_link" data-node-type="page_links" data-node-label="Card 2 Link" data-node-default="#">
            <div class="shrink-0">
              <div class="w-11 h-11 border border-white/80 rounded-lg flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7V17"/>
                </svg>
              </div>
            </div>
          </a>
        </div>

        <!-- IMAGE -->
        <div class="mt-6 rounded-xl overflow-hidden">
          <img src="{{card2_image}}" data-node="card2_image" data-node-type="file" data-node-label="Card 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767359362/seltrix/templates/real-estate-template/interior2.png" alt="Thoughtful Space" class="w-full h-[220px] sm:h-[260px] lg:h-[300px] object-cover">
        </div>

      </div>

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