<ul class="flex flex-col gap-6">
  {% for category in categories %}
    <li class="grow">
      <div class="flex gap-3 mb-3 items-center bg-grey-150 p-5">
        <i class="text-2xl {{ category.icon }}"></i>
        <h2 class="font-alt text-2xl">{{ category.name }}</h2>
      </div>
      {% for point in category.points %}
        {% include 'patterns/molecules/popouts/popout_point.html' with name=point.name %}
      {% endfor %}
    </li>
  {% endfor %}
</ul>
