<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
  {% for report in reports %}
  <a href="{{ report.href }}" class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft hover:border-brand-300 hover:bg-brand-50/30"><div class="text-xs font-semibold uppercase tracking-wide text-brand-600">{{ report.group }}</div><h3 class="mt-2 font-semibold text-slate-900">{{ report.title }}</h3><p class="mt-2 text-sm text-slate-500">{{ report.desc }}</p><div class="mt-4 text-sm font-semibold text-brand-700">View report →</div></a>
  {% endfor %}
</div>
