web/wp-content/themes/mozilla-builders/templates/components/tease-list.twig

{% if posts|length %}
<ul class="px-grid-site-margin centered-page">
  {% for post in posts %}
    {% if post.topper_type == 'big_image' %}
      {% if post.thumbnail.width > post.thumbnail.height %}
        {% set img_size = 'max-md:w-1/2 md:col-start-1 md:col-span-7 xl:col-span-6' %}
      {% elseif post.thumbnail.width < post.thumbnail.height %}
        {% set img_size = 'max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-5' %}
      {% else %}
        {% set img_size = 'max-md:w-1/2 md:col-start-1 md:col-span-5 xl:col-span-4' %}
      {% endif %}
    {% elseif post.topper_type == 'small_image' %}
      {% if post.thumbnail.width > post.thumbnail.height %}
        {% set img_size = 'max-md:w-1/4 md:col-start-1 md:col-span-4 xl:col-span-3' %}
      {% elseif post.thumbnail.width < post.thumbnail.height %}
        {% set img_size = 'max-md:w-1/4 md:col-start-1 md:col-span-2 xl:col-span-2' %}
      {% else %}
        {% set img_size = 'max-md:w-1/4 md:col-start-1 md:col-span-2 xl:col-span-2' %}
      {% endif %}
    {% endif %}
    <li class="col-span-full grid grid-cols-site gap-x-grid-site-gutter gap-y-2 py-4 relative border-t border-content grid-rows-[min-content,_1fr]">
      <div class="col-span-full md:col-span-8 xl:col-span-5 order-1">
        <h3 class="text-sm font-semibold uppercase leading-tight">
          <a class="before:absolute before:inset-0 before:z-10 group" href="{{ post.link }}">
            <span class="inline group-hocus:bg-action-focus group-hocus:text-action-focus-reverse">{{ post.title }}</span>
          </a>
        </h3>
      </div>

      <div class="col-span-full md:max-xl:row-start-2 md:max-xl:col-start-1 md:col-span-8 xl:col-span-5 order-2 {{ not post.subtitle ? 'hidden md:block' }}">
        {% if post.subtitle %}
          <p class="text-sm">{{ post.subtitle }}</p>
        {% endif %}
      </div>

      <div class="col-span-full md:col-span-8 xl:col-span-9 md:max-xl:row-start-1 md:max-xl:col-start-9 order-3 max-md:order-5 max-md:mt-1 md:max-xl:row-span-2 md:grid md:grid-cols-8 xl:grid-cols-9 md:gap-x-grid-site-gutter {{ not post.thumbnail ? 'hidden md:block' }}">
        {% if post.thumbnail and post.show_image_on_index %}
          <div class="{{ img_size }}">
            {% include 'templates/components/lazy-img.twig' with { img: post.thumbnail } %}
          </div>
        {% endif %}
      </div>

      <div class="col-span-full md:col-span-8 xl:col-span-3 md:max-xl:row-start-1 md:max-xl:col-start-17 order-4 max-md:order-3">
        <p class="text-sm">
          {% include 'components/articles/byline_format.twig' with { bylines: post.authors } %}
        </p>
      </div>

      <div class="col-span-full md:col-span-8 xl:col-span-2 md:max-xl:col-start-17 order-5 max-md:-order-1 md:max-xl:row-start-2">
        <div class="mt-1 max-md:mb-1 flex xl:justify-end xl:text-right leading-4 relative z-20">
          {% include "components/articles/overline.twig" with { overline: post.categories[0] } %}
        </div>
      </div>
    </li>
  {% endfor %}
</ul>
{% endif %}