<section data-component-type="Hero" class="bg-white pt-[130px] pb-[60px] lg:pt-[150px] lg:pb-[60px]" data-component-slug="ss-interior-kitchen-hero">
  <div class="max-w-[90%] mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Top Row: Heading and Description -->
    <div class="flex flex-col lg:flex-row justify-between items-start mb-12 lg:mb-16 gap-8 lg:gap-20">
      
      <!-- Left: Heading -->
      <div class="w-full lg:w-1/2">
        <h1 data-node="title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="Designed Around Modern Kitchen Living" class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight">
          {{title}}
        </h1>
      </div>

      <!-- Right: Description -->
      <div class="w-full lg:w-1/3 pt-2 lg:pt-4">
        <p data-node="description" data-node-type="textarea" data-node-label="Hero Description" data-node-default="Creating kitchen solutions where aesthetics and performance work seamlessly together." class="text-base sm:text-lg text-[#636363] leading-relaxed text-left lg:text-right">
          {{description}}
        </p>
      </div>

    </div>

    <!-- Bottom Row: Image -->
    <div class="w-full relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-[21/9] overflow-hidden rounded-[32px]">
      <img data-node="hero_image" data-node-type="file" data-node-label="Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767779847/seltrix/templates/ss-interior-kitchen/hero_image.png" src="{{hero_image}}" alt="Modern Kitchen" class="w-full h-full object-cover">
    </div>

  </div>
</section>