web/wp-content/themes/mozilla-builders/templates/components/articles/byline.twig

<div class="grid grid-site pt-12 centered-page text-sm max-md:pt-6">
  <div class="col-span-full flex flex-col md:grid md:grid-cols-site md:gap-x-grid-site-gutter md:border-t md:border-content md:pt-3 ">
    <p class="md:col-span-6 2xl:col-span-7 uppercase leading-tight max-md:flex max-md:gap-6 max-md:justify-between max-md:border-b max-md:border-content max-md:pt-2.5 max-md:pb-2">
      <span class="block">by</span>
      {% include 'components/articles/byline_format.twig' with { bylines: post.authors } %}
    </p>

    <p class="md:col-span-6 uppercase leading-tight col-span-2 max-md:flex max-md:gap-6 max-md:justify-between max-md:border-b max-md:border-content max-md:pt-2.5 max-md:pb-2">
      <span class="block">on</span>
      <time class="max-md:text-right" datetime="{{ post.date|date('c') }}">{{ post.date|date('M d, Y') }}</time>
    </p>

    {% if post.art_credit %}
      <div class="md:col-span-6 2xl:col-span-7 md:col-start-end max-md:flex max-md:gap-6 max-md:justify-between max-md:border-b max-md:border-content max-md:pt-2.5 max-md:pb-2">
        <p class="uppercase leading-tight">Art</p>
        <p class="uppercase leading-tight">
          {% if post.art_credit_link %}
            <a href="{{ post.art_credit_link }}" class="hover-link font-bold">{{ post.art_credit }}</a>
          {% else %}
            {{ post.art_credit }}
          {% endif %}
        </p>
      </div>
    {% endif %}
  </div>
</div>