<div class="space-y-6">
  {% for group_name, cards in report_groups.items() %}
  <div>
    <h2 class="mb-3 text-lg font-bold text-slate-900">{{ group_name }}</h2>
    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {% for card in cards %}
      <a href="{{ card.href }}" class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-200 hover:bg-brand-50">
        <div class="flex items-start justify-between gap-3"><h3 class="font-bold text-slate-900">{{ card.title }}</h3><span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ card.metric }}</span></div>
        <p class="mt-3 text-sm text-slate-600">{{ card.description }}</p>
        <div class="mt-4 text-sm font-semibold text-brand-700">View report</div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>