web/wp-content/themes/mozilla-builders/templates/components/previews/project.twig

<div class="flex flex-col gap-6">
  <div class="flex flex-col gap-6 relative">
    {% if project.thumbnail and project.show_image_on_index %}
      {% if archive %}
        <div class="w-1/2">
          {% include "components/lazy-img.twig" with { img: project.thumbnail } %}
        </div>
      {% endif %}
    {% endif %}

    <div class="border-t border-content pt-2">
      <h3 class="text-lg uppercase">
        <a href="{{ project.link }}" class="before:absolute before:inset-0 before:z-10 hocus:text-action-focus-reverse hocus:bg-action-focus">{{ project.title }}</a>
      </h3>
    </div>

    <p>{{ project.tagline }}</p>
  </div>

  <div class="flex flex-col divide-content">
    <dl class="flex flex-col divide-content">
      {% if project.contributors is not empty %}
      <div class="flex justify-between gap-4 pt-1.5">
        <dt>Contributor{{ project.contributors|length > 1 ? 's' : '' }}</dt>
        <dd class="text-right [&_a]:font-semibold">
          {% include "components/articles/byline_format.twig" with { bylines: project.contributors } %}
        </dd>
      </div>
      {% endif %}

      {% if project.platforms is not empty %}
      <div class="flex justify-between gap-4 pt-1.5">
        <dt>Platform{{ project.platforms|length > 1 ? 's' : '' }}</dt>
        <dd class="text-right font-semibold">
          {% for platform in project.platforms %}
            <a href="{{ platform.link }}" class="hover-link">{{ platform.name }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}

      {% if project.categories is not empty %}
      <div class="flex justify-between gap-4 pt-1.5">
        <dt>{{ project.categories|length > 1 ? 'Categories' : 'Category' }}</dt>
        <dd class="text-right font-semibold">
          {% for category in project.categories %}
            <a href="{{ category.link }}" class="hover-link">{{ category.name }}</a>{% if not loop.last %}, {% endif %}
          {% endfor %}
        </dd>
      </div>
      {% endif %}
    </dl>

    <div class="flex justify-between gap-4 pt-1.5">
      <a href="{{ project.link }}" class="hover-link">Project Details</a>

      {% if project.github_link %}
        <a href="{{ project.github_link }}" class="hover-link">GitHub</a>
      {% endif %}
    </div>
  </div>

  {% if project.thumbnail and project.show_image_on_index %}
    {% if not archive %}
      <div class="w-1/2 lg:mt-6">
        {% include "components/lazy-img.twig" with { img: project.thumbnail } %}
      </div>
    {% endif %}
  {% endif %}
</div>