<section id="features" class="py-20">
  <div class="container mx-auto px-4">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-4xl md:text-5xl font-bold mb-4">
        <span class="text-primary">{{ sections.features.title }}</span>
      </h2>
      <p class="text-lg text-gray-600">{{ sections.features.subtitle }}</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      {% for feature in sections.features.items %}
      <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
          <span class="w-6 h-6 flex items-center justify-center text-primary"><i
              class="{{ feature.icon }} ri-lg"></i></span>
        </div>
        <h3 class="text-xl font-semibold mb-3">{{ feature.title }}</h3>
        <p class="text-gray-600">{{ feature.subtitle }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>