<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 %} {% if loop.index <= 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>
            {% endif %} {% 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>
