web/wp-content/themes/mozilla-builders/templates/components/front-page/small-tease-jumble.twig

{% if posts is not empty %}

<section class="centered-page grid grid-site gap-y-12{% if home_top %} mt-16{% endif %}">
  <div class="col-span-full md:col-span-16 lg:col-start-2 lg:col-span-10 flex-1 flex flex-col justify-center">
    <div class="w-full">
      {% if posts.count >= 1 %}
          {% include [
            'components/articles/previews/preview--' ~ posts[0].topper_type|default('text_only') ~ '-feature.twig',
            'components/articles/previews/preview--' ~ posts[0].topper_type|default('text_only') ~ '.twig'
          ] with { post: posts[0], class: 'aspect-[4/5]', size: 'lg' } %}
      {% endif %}
    </div>
  </div>


  <div class="max-lg:contents lg:col-start-13 lg:col-span-6 flex-1 lg:flex lg:justify-center">
    <div class="max-md:contents md:max-lg:md:col-span-8 lg:w-full flex-1 flex flex-col justify-center md:items-end gap-y-12">
      <div class="max-md:col-span-4 md:w-full">
        {% if posts.count >= 2 %}
          {% include [
            'components/articles/previews/preview--' ~ posts[1].topper_type|default('text_only') ~ '-alt.twig',
            'components/articles/previews/preview--' ~ posts[1].topper_type|default('text_only') ~ '.twig'
          ] with { post: posts[1], class: 'aspect-[4/5]' } %}
        {% endif %}
      </div>
    {% if home_top %}
      <div class="max-md:col-span-4 max-md:col-start-3 max-md:col-span-4 max-md:col-start-3 max-lg:col-span-8 md:w-[72.5%] lg:w-full xl:w-[64.5%]">
        {% if posts.count >= 3 %}
          {% include [
            'components/articles/previews/preview--' ~ posts[2].topper_type|default('text_only') ~ '-alt.twig',
            'components/articles/previews/preview--' ~ posts[2].topper_type|default('text_only') ~ '.twig'
          ] with { post: posts[2], class: 'aspect-[4/5]' } %}
        {% endif %}
      </div>
    {% endif %}
    </div>
  </div>

  <div class="max-lg:contents lg:col-start-19 lg:col-span-6 flex-1 flex flex-col justify-center gap-y-12">
    {% if home_top %}
      <div class="w-full col-span-full md:col-span-12 md:col-start-1 lg:col-start-7 flex md:flex-col max-md:items-end gap-3">
        <div class="flex flex-col gap-y-3">
          <p class="text-sm uppercase">{{ topper.new_promotion.overline }}</p>
          <div class="type-headline-lg md:type-headline-md [&_a]:underline [&_a:hover]:no-underline">
            {{ topper.new_promotion.prompt }}
          </div>
        </div>

        {% if topper.new_promotion.image %}
          <div class="ml-auto w-36 md:w-1/3">
            {% include 'components/lazy-img.twig' with { img: get_image( topper.new_promotion.image ) } %}
          </div>
        {% endif %}
      </div>
    {% else %}
      <div class="w-full max-md:col-span-4 max-md:col-start-3 max-lg:col-span-8 2xl:w-[64.5%]">
        {% if posts.count >= 3 %}
          {% include [
            'components/articles/previews/preview--' ~ posts[2].topper_type|default('text_only') ~ '-alt.twig',
            'components/articles/previews/preview--' ~ posts[2].topper_type|default('text_only') ~ '.twig'
          ] with { post: posts[2], class: 'aspect-[4/5]' } %}
        {% endif %}
      </div>
    {% endif %}

    <div class="w-full max-md:col-span-4 {% if home_top %}md:max-lg:col-start-15 md:max-lg:col-span-10{% else %}max-lg:col-span-16{% endif %}">
      {% if posts.count >= 4 %}
        {% include [
          'components/articles/previews/preview--' ~ posts[3].topper_type|default('text_only') ~ '-alt.twig',
          'components/articles/previews/preview--' ~ posts[3].topper_type|default('text_only') ~ '.twig'
        ] with { post: posts[3], class: 'aspect-[4/5]' } %}
      {% endif %}
    </div>
  </div>
  <div class="col-span-full lg:col-span-12 lg:col-start-13">
    {% if home_top %}
      {% set label = topper.cta_label ?: 'Explore content' %}
      {% include 'components/button-link.twig' with { href: archive_links.posts, label: label } %}
    {% endif %}
  </div>
</section>

{% endif %}