
<section class="max-w-7xl mx-auto px-6">
  <div class="text-center mb-12" data-aos="fade-up">
    <h2
      class="text-2xl md:text-3xl font-bold text-[#1F2937]"
      style="font-family: Inter, sans-serif"
    >
      {{ sections.gallery.title }}
    </h2>
  </div>

  <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
    {% for item in sections.gallery.items %}
    <div
      class="rounded-xl overflow-hidden shadow-sm bg-white border border-gray-100"
      data-aos="fade-up"
      data-aos-delay="{{ loop.index * 100 }}"
    >
      <img
        src="{{ item.src }}"
        alt="{{ item.alt }}"
        class="w-full h-56 object-cover"
      />
      {% if item.caption %}
      <div class="text-center py-2 text-sm text-gray-600 bg-gray-50">
        {{ item.caption }}
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</section>
