web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image-feature.twig (21 lines of code) (raw):
{% if post.thumbnail.id %}
{% if post.thumbnail.width > post.thumbnail.height %}
{% set img_width = 'w-full' %}
{% else %}
{% set img_width = 'w-[60%]' %}
{% endif %}
{% endif %}
<div class="relative flex-1 flex flex-col items-center gap-1 p-4 min-h-96">
<div class="relative {{ img_width }} {{ post.thumbnail.id ? '' : 'bg-gray' }}">
{% if post.thumbnail.id %}
{% include 'components/lazy-img.twig' with { img: get_image(post.thumbnail.id), class: '' } %}
{% endif %}
</div>
<div class="relative z-20 mt-6">
{% include 'components/articles/overline.twig' with { overline: post.categories[0] } %}
</div>
<h3 class="mt-3 type-headline-xl text-center text-balance leading-tighter">
<a class="before:absolute before:inset-0 before:z-10 hocus:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
</h3>
<p class="type-sans-sm text-center text-balance">{{ post.subtitle }}</p>
</div>