<section
  class="bg-cover bg-center pb-[60px] lg:pb-[50px] md:pb-[80px] mb-[170px]"
  data-component-type="Content"
>
  <div class="lg:max-w-[100%] max-w-full mx-auto grid grid-cols-1 gap-3">
    <div
      class="w-full relative flex items-start justify-center h-[250px] lg:h-[500px]"
    >
      <div class="relative w-full h-full overflow-hidden">
        <img
          class="absolute inset-0 w-full h-full object-cover"
          data-node="breakfast_bg_image"
          data-node-type="file"
          data-node-label="Breakfast Background Image"
          data-node-default="../assets/breakfast_banner/msbg.png"
          src="{{ breakfast_bg_image | default: '../assets/breakfast_banner/msbg.png' }}"
          alt="Breakfast Background"
        />

        <div class="relative z-10"></div>
      </div>

      <div
        class="absolute bottom-[-200px] left-1/2 -translate-x-1/2 z-40 w-[80%]"
      >
        <div class="grid grid-cols-1 gap-6">
          <div class="flex items-center gap-6 w-full">
            <img
              data-node="breakfast_side_image"
              data-node-type="file"
              data-node-label="Breakfast Side Image"
              data-node-default="../assets/breakfast_banner/sidebg.png"
              src="{{breakfast_side_image}}"
              class="w-[500px] h-[300px] object-contain"
              alt="Breakfast Image"
            />

            <div class="flex flex-col justify-center hidden md:block">
              <h1
                data-node="breakfast_heading"
                data-node-type="text"
                data-node-label="Breakfast Heading"
                data-node-default="Breakfast!"
                class="text-[#534931] text-[24px] font-semibold"
              >
                {{breakfast_heading}}
              </h1>

              <p
                data-node="breakfast_description"
                data-node-type="text"
                data-node-label="Breakfast Description"
                data-node-default="Lorem ipsum dolor sit amet consectetur."
                class="text-[18px] font-normal text-[#B38E6A] leading-5 mt-2"
              >
                <b>{{breakfast_description}}</b>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
