<section class=" bg-cover bg-center bg-[#FFFFFF] pb-[10px] md:pb-[30px]
   " data-component-type="Content">

  <div class="">


    <div class="lg:max-w-[80%] max-w-full mx-auto p-[20px] lg:p-[0px]
        mt-[20px] lg:mt-[30px]
        bg-contain bg-center bg-no-repeat" data-node="blog_section_bg" data-node-type="file"
      data-node-label="Blog Section Background" data-node-default="../assets/our_blogs/img2.png"
      style="background-image: url('{{blog_section_bg}}');">

      <div class="flex justify-center w-[100%] mt-[20px]  mb-[30px] ">



        <div class="lg:w-[100%] w-[90%]
        flex flex-col justify-start
         ">

          <p class="text-[#5C5C5C] mt-5 text-[16px] lg:text-[20px] font-semibold" data-node="blog_subtitle"
            data-node-type="text" data-node-label="Blog Subtitle" data-node-default="OUR BLOG">
            {{blog_title}}
          </p>

          <h1 class="text-[#534931] text-[40px] lg:text-[50px] md:pt-[10px] font-bold leading-tight"
            data-node="blog_subtitle2" data-node-type="text" data-node-label="Blog Subtitle"
            data-node-default="Recent Posts">
            {{blog_subtitle2}}
          </h1>


        </div>

      </div>

      <!-- IMAGE + CARD -->
      <div class="w-full relative flex items-start justify-start h-[250px] lg:h-[500px]
    
        ">

        <div class="group relative transition-all duration-500
                 w-[50%] xl:w-[40%] lg:w-[50%] h-full
                 flex items-center justify-center overflow-visible
                 bg-cover bg-center" data-node="blog_main_image" data-node-type="file"
          data-node-label="Main Blog Image" data-node-default="../assets/our_blogs/img1.png"
          style="background-image: url('{{blog_main_image}}');">

          <div class="absolute inset-0 bg-black/60"></div>

          <!-- WHITE CARD GOING OUTSIDE IMAGE -->
          <div class="absolute top-[1/2] xl:right-[-570px] lg:right-[-370px] md:right-[-250px] right-[-90px]  max-w-[100%]
            
            ">




            <!-- CONTENT SECTION -->
            <div class="w-full flex items-start justify-start md:h-auto lg:h-auto  md:p-[0px]">


              <div class="max-w-full transition-all duration-500 flex gap-10 ">
                <!-- Image Wrapper -->
                <div class="relative overflow-hidden flex gap-3">

                  <img class="w-full md:h-[100px] h-[100px] lg:h-[200px] object-cover" data-node="blog_item_1_image"
                    data-node-type="file" data-node-label="Blog Item 1 Image"
                    data-node-default="../assets/our_blogs/img3.png" src="{{blog_item_1_image}}" alt="Blog image" />

                </div>

                <div class="hidden lg:block">


                  <h1 class="text-[#534931] text-[20px] lg:text-[25px] md:pt-[20px] font-bold leading-tight"
                    data-node="blog_item_1_title" data-node-type="text" data-node-label="Blog Item 1 Title"
                    data-node-default="Secrets of Delicious Coffee">
                    {{blog_item_1_title}}
                  </h1>

                  <p class="text-[#5C5C5C] mt-5 text-[16px] lg:text-[18px]  max-w-[600px]" data-node="blog_item_1_desc"
                    data-node-type="text" data-node-label="Blog Item 1 Description"
                    data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet">
                    {{blog_item_1_desc}}
                  </p>


                </div>

              </div>

            </div>

            <!-- CONTENT SECTION -->
            <div class="w-full flex items-start justify-start md:h-auto lg:h-auto  md:p-[0px] mt-[20px]">


              <div class="max-w-full transition-all duration-500 flex gap-10 ">
                <!-- Image Wrapper -->
                <div class="relative overflow-hidden flex gap-3">
                  <img data-node="blog_item_2_image" data-node-type="file" data-node-label="Blog Item 2 Image"
                    data-node-default="../assets/our_blogs/img4.png" src="{{blog_item_2_image}}" alt="Blog image"
                    class="w-full h-[100px] md:h-[100px] lg:h-[200px] object-cover">

                </div>

                <div class="hidden lg:block">


                  <h1 class="text-[#534931] text-[20px] lg:text-[25px] md:pt-[20px] font-bold leading-tight"
                    data-node="blog_item_2_title"
                  data-node-type="text"
                  data-node-label="Blog Item 2 Title"
                  data-node-default="Secrets of Delicious Coffee">
                    {{blog_item_2_title}}
                  </h1>

                  <p class="text-[#5C5C5C] mt-5 text-[16px] lg:text-[18px]  max-w-[600px]"
                    data-node="blog_item_2_desc"
                  data-node-type="text"
                  data-node-label="Blog Item 2 Description"
                  data-node-default="Lorem ipsum dolor sit amet consectetur. Leo elit sollicitudin aliquet">
                     {{blog_item_2_desc}}
                  </p>


                </div>

              </div>

            </div>

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



    </div>


</section>