<section
  class="py-5 md:py-14 overflow-hidden"
  data-component-type="Content"
>

  <div class="max-w-[90%] mx-auto px-4 relative">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">

      <!-- LEFT COLUMN -->
      <div>

        <!-- MAIN IMAGE -->
        <div class="overflow-hidden rounded-sm shadow-md mb-[20px]">
          <img
            data-node="lorem_main_image"
            data-node-type="file"
            data-node-label="Lorem Section Main Image"
            data-node-default="../assets/LOREM _PSUM/img1.png"
            src="{{lorem_main_image}}"
            alt="Lorem section image"
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
          />
        </div>

        <!-- TEXT CONTENT -->
        <div class="relative z-[50]">

          <!-- TAG -->
          <p
            data-node="lorem_tag"
            data-node-type="text"
            data-node-label="Lorem Section Tag"
            data-node-default="LOREM IPSUM"
            class="text-[#5C5C5C] pt-[50px] text-[16px] lg:text-[20px] font-semibold"
          >
            {{lorem_tag}}
          </p>

          <!-- HEADING -->
          <h1
            data-node="lorem_heading"
            data-node-type="text"
            data-node-label="Lorem Section Heading"
            data-node-default="Lorem ipsum dolor sit amet consectetur"
            class="text-[#534931] text-[40px] lg:text-[40px] xl:text-[70px] md:pt-[20px] font-bold leading-tight"
          >
            {{lorem_heading}}
          </h1>

          <!-- DESCRIPTION -->
          <p
            data-node="lorem_description"
            data-node-type="text"
            data-node-label="Lorem Section Description"
            data-node-default="Lorem ipsum dolor sit amet consectetur."
            class="text-[#5C5C5C] mt-5 text-[16px] lg:text-[20px] font-semibold max-w-[600px]"
          >
            {{lorem_description}}
          </p>

        </div>

        <!-- BUTTON -->
        <div class="flex justify-start gap-10">
          <button
            data-node="lorem_cta_text"
            data-node-type="text"
            data-node-label="Lorem CTA Button Text"
            data-node-default="Contact us"
            class="mt-8 bg-[#B38E6A] text-white font-semibold px-6 py-3 border border-transparent lg:text-[22px]
                   hover:bg-[#B38E6A] hover:border-[#B38E6A] rounded-[30px]
                   transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2"
          >
            {{lorem_cta_text}}
          </button>
        </div>

      </div>

      <!-- RIGHT COLUMN IMAGE -->
      <div class="grid grid-cols-1">
        <div class="overflow-hidden rounded-sm shadow-md">
          <img
            data-node="lorem_side_image"
            data-node-type="file"
            data-node-label="Lorem Section Side Image"
            data-node-default="../assets/LOREM _PSUM/img2.png"
            src="{{lorem_side_image}}"
            alt="Lorem side image"
            class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
          />
        </div>
      </div>

    </div>

    <!-- DECORATIVE BACKGROUND IMAGE -->
    <div
      class="absolute top-[-120px] right-[-200px] z-[49] hidden lg:flex
             w-[100%] p-5 justify-evenly items-center"
    >
      <img
        data-node="lorem_bg_image"
        data-node-type="file"
        data-node-label="Lorem Decorative Background Image"
        data-node-default="../assets/LOREM _PSUM/image3.png"
        src="{{lorem_bg_image}}"
        class="lg:w-[800px] h-auto object-contain"
        alt="Decorative background"
      />
    </div>

  </div>

</section>
