web/wp-content/themes/mozilla-builders/blocks/related-articles/related-articles.twig

{% if related_articles is not empty %}
<section data-block="related-articles" class="py-3 {{ alignclass }}">
  {% if related_articles_header %}
    <div class="col-span-full border border-content p-1">
      <h2 class="uppercase text-center text-xs leading-3 tracking-wide">{{ related_articles_header }}</h2>
    </div>
  {% endif %}

  {% if related_articles %}
    <ul class="contents">
      {% for post in related_articles %}
        <li class="relative grid auto-rows-[min-content_1fr] max-md:grid-cols-6 md:grid md:grid-cols-10 gap-x-grid-site-gutter py-4 border-b border-content">
          <a class="max-md:col-span-4 md:col-span-5 mt-2 leading-tighter before:absolute before:inset-0 before:z-10 group" href="{{ post.link }}">
            <span class="uppercase font-bold group-hocus:bg-content group-hocus:text-main">{{ post.title }}</span>
          </a>

          <div class="max-md:col-span-2 max-md:row-start-1 max-md:row-span-2 max-md:col-start-5 md:col-span-3">
            <div class="w-full md:aspect-square {{ post.thumbnail.id ? '' : 'bg-gray' }}">
              {% if post.thumbnail.id %}
                {% include "components/lazy-img.twig" with { img: get_image(post.thumbnail), class: 'max-w-full max-h-full m-auto' } %}
              {% endif %}
            </div>
          </div>

          <div class="max-md:row-start-1 max-md:col-span-4 md:col-span-2 md:mt-3 flex md:justify-end">
            {% include "components/articles/overline.twig" with { overline: post.categories[0], color: post.color } %}
          </div>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</section>
{% endif %}