web/wp-content/themes/mozilla-builders/templates/components/person-grid.twig

<ul class="grid grid-cols-site gap-x-grid-site-gutter gap-y-8">
  {% for profile in people %}
    <li class="relative col-span-1/2 md:col-span-1/3 lg:col-span-6 xl:col-span-1/6">
      <div class="w-full aspect-poster {% if not profile.thumbnail %}bg-content/10{% endif %}">
        {% if profile.thumbnail %}
          {% include 'components/lazy-img.twig' with {
            img: profile.thumbnail,
            aspectRatio: false,
            class: 'w-full h-full object-cover',
          } %}
        {% endif %}
      </div>

      <p class="mt-2 text-sm uppercase font-semibold">
        <a href="{{ profile.link }}" class="before:absolute before:inset-0 hocus:bg-content hocus:text-main">
          {{ profile.first_name }} {{ profile.last_name }}
        </a>
      </p>
      {% if profile.projects %}
        <p class="text-sm uppercase">{{ profile.projects[0].title }}</p>
      {% endif %}
    </li>
  {% endfor %}
</ul>