web/wp-content/themes/mozilla-builders/templates/components/page-topper.twig

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

<header class="centered-page px-grid-site-margin">
  <div class="border-t border-content pt-2 mt-12 mb-16 md:mt-16 md:mb-24 xl:mt-20 xl:mb-30">
    <div class="grid grid-cols-6 md:grid-cols-24 gap-x-grid-site-gutter">
      <div class="col-span-full md:col-span-1/2 flex items-baseline gap-3 type-headline-xl md:type-headline-3xl">
        <svg class="inline-flex h-[0.69em] aspect-[47/104] text-spot shrink-0" aria-hidden="true">
          <use href="#protocol" />
        </svg>
        <h1>
          {{ title }}
        </h1>
      </div>

      {% if asset %}
        <div class="col-span-full md:col-span-1/3 md:col-start-17 mt-3">
          {% include 'components/lazy-img.twig' with {
            img: asset,
            class: 'w-full',
          } %}
        </div>
      {% endif %}
    </div>
  </div>
</header>