<section class="py-24 bg-gray-50" id="about">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-2 gap-16 items-center">
      <div class="relative">
        <img src="{{ sections.about.media.src }}" class="w-full rounded-lg" alt="{{ sections.about.media.alt }}" loading="lazy">
        <div class="absolute -bottom-8 -right-8 bg-white p-8 rounded-lg shadow-xl">
          <div class="grid grid-cols-3 gap-5 text-center">
            {% for stat in sections.about.stats[:3] %}
            <div>
              <p class="text-3xl font-cinzel font-bold text-primary mb-2">{{ stat.value }}</p>
              <p class="text-sm text-gray-600 font-cinzel">{{ stat.label }}</p>
            </div>
            {% endfor %}
            
          </div>
        </div>
      </div>
      <div>
        <h2 class="text-3xl sm:text-4xl font-cinzel font-bold text-gray-900 mb-6">{{ sections.about.title }}</h2>
        <p class="text-base sm:text-lg text-gray-600 mb-6 font-cinzel">{{ sections.about.content }}</p>
        <button type="button" class="inline-block px-8 py-3 bg-primary text-white font-cinzel font-medium rounded-lg shadow-md hover:bg-primary/90 transition duration-300 ease-in-out" aria-label="Discover Our Story">Discover Our Story</button>
      </div>
    </div>
  </div>
</section>