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

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

<header class="grid grid-site pt-10 max-md:flex max-md:flex-col centered-page">
  <div class="flex flex-col justify-center items-center gap-4 col-span-full md:col-span-1/2 lg:gap-10">
    <div class="flex flex-col items-center gap-6 lg:gap-12">
      <div class="flex-1">
        {% 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>

    {% if post.subtitle %}
      <p class="type-sans-subhead uppercase text-balance text-center">
        {{ post.subtitle }}
      </p>
    {% endif %}
  </div>


  <div class="flex items-end col-span-full md:col-span-1/2 max-md:pt-6">
    {% 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>
</header>