<div class="space-y-6">
  {% set groups = reports|groupby('group') %}
  {% for group, items in groups %}
  <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft">
    <h2 class="text-lg font-bold text-slate-900">{{ group }}</h2>
    <div class="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {% for report in items %}
      <a href="{{ report.href }}" class="rounded-2xl border border-slate-200 p-4 hover:border-brand-200 hover:bg-brand-50/40"><div class="font-semibold text-slate-900">{{ report.title }}</div><p class="mt-1 text-sm text-slate-500">{{ report.desc }}</p><div class="mt-3 text-xs font-semibold text-brand-700">View report</div></a>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
