<section
  id="challenges"
  class="py-16 bg-gradient-to-br from-primary/10 to-secondary/5 overflow-hidden"
>
  <div class="max-w-7xl mx-auto px-6">
    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 text-center mb-8">
      {{ sections.challenges.title }}
    </h2>
    <p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
      {{ sections.challenges.subtitle }}
    </p>

    <!-- Mobile: horizontal snap; Desktop: grid -->
    <div
      class="overflow-x-auto snap-x snap-mandatory flex space-x-6 sm:space-x-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-6"
    >
      {% for item in sections.challenges.items %}
      <div
        class="snap-center min-w-[80%] sm:min-w-0 bg-{{ item.color }}-100 bg-white p-6 rounded-2xl shadow-lg transform hover:-translate-y-2 transition duration-300 relative"
      >
        <!-- Layered shadow effect -->
        <div
          class="absolute inset-0 rounded-2xl -z-10 scale-95 opacity-70"
        ></div>

        <div
          class="w-12 h-12 flex items-center justify-center bg-{{ item.color }}-200 rounded-lg mb-4"
        >
          <i class="{{ item.icon }} text-{{ item.color }}-600 text-xl"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-800 mb-2">
          {{ item.value }}
        </h3>
        <p class="text-sm text-gray-600">{{ item.label }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
