web/wp-content/themes/mozilla-builders/templates/components/articles/toppers/topper--small_image.twig

{% if post.thumbnail.id %}
  {% set asset = get_image(post.thumbnail.id) %}
{% endif %}

<header class="flex flex-col pt-10 gap-4 centered-page xl:pt-20">
  <div class="w-full grid grid-site max-md:flex-col max-md:items-center max-md:gap-8">
    <div class="flex items-end col-span-full justify-center md:col-span-2/3 max-md:order-2">
      <div class="flex flex-col items-center gap-6 max-md:gap-4">
        <div class="flex justify-center">
          {% include 'components/articles/overline.twig' with { overline: post.categories[0] } %}
        </div>

        <h1 class="type-headline-2xl text-balance text-center leading-none">{{ post.title }}</h1>
      </div>
    </div>

    <div class="flex col-span-full md:col-span-1/3 max-md:order-1">
      <div class="w-full mx-auto max-md:max-w-xs">
        {% if asset %}
          {% include 'components/lazy-img.twig' with {
            img: asset,
            class: 'w-full',
          } %}
        {% else %}
          <div class="flex w-full aspect-square bg-gray"></div>
        {% endif %}
      </div>
    </div>
  </div>

  {% if post.subtitle %}
    <div class="grid grid-site">
      <p class="col-span-full md:mt-6 type-sans-subhead uppercase text-pretty text-center md:text-left xl:col-span-18">
        {{ post.subtitle }}
      </p>
    </div>
  {% endif %}
</header>