web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--portrait-feature.twig

<div class="relative max-md:flex-1 max-md:flex max-md:flex-col md:grid md:grid-cols-18  xl:grid-cols-16 gap-x-grid-site-gutter items-center gap-1 p-4 min-h-96">
  <div class="relative w-full md:col-span-1/2 md:col-start-10 xl:col-start-9 {{ 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="w-full md:col-span-1/2 md:col-start-1 md:row-start-1 flex flex-col items-center">
    <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>
</div>