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

{% if posts is not empty %}

<section class="centered-page grid grid-site md:max-lg:grid-cols-12 mt-16">
  <h2 class="sr-only">Featured</h2>

  <div class="col-span-full md:col-span-12">
    <div class="grid grid-cols-site md:grid-cols-12 gap-x-grid-site-gutter gap-y-12 lg:gap-y-6">
      <div class="col-span-full col-start-1 md:col-span-8 md:col-start-5 md:order-2">
        {% 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 class="col-span-3 col-start-1 md:col-span-4 md:order-1 md:self-center">
        {% 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] } %}
        {% endif %}
      </div>

      <div class="col-span-3 col-start-4 md:col-span-4 md:col-start-1 order-3 max-md:mt-36">
        {% 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] } %}
        {% endif %}
      </div>

      <div class="col-span-4 md:col-start-6 md:col-span-6 lg:col-start-5 order-4 md:mt-24">
        {% 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>

  <div class="col-span-full md:col-span-12 flex flex-col flex-1 gap-y-12 max-lg:mt-12">
    <div class="w-full flex-1 grid grid-cols-6 md:grid-cols-12 gap-x-grid-site-gutter max-md:gap-y-12">
      <div class="w-full col-span-6 md:col-start-4 lg:col-start-5 lg:col-span-8 flex md:flex-col max-md:items-end gap-3 md:mb-6 lg:mb-4">
        <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-24 sm:w-24 md:w-1/3 lg:w-1/4 max-md:shrink-0">
            {% include 'components/lazy-img.twig' with { img: get_image( topper.new_promotion.image ) } %}
          </div>
        {% endif %}
      </div>

      <div class="col-span-4 max-md:col-start-3 md:col-span-6 flex flex-col max-md:flex-1 md:max-lg:self-end">
        {% if posts.count >= 5 %}
          {% include [
            'components/articles/previews/preview--' ~ posts[4].topper_type|default('text_only') ~ '-alt.twig',
            'components/articles/previews/preview--' ~ posts[4].topper_type|default('text_only') ~ '.twig'
          ] with { post: posts[4] } %}
        {% endif %}
      </div>

      <div class="col-span-4 md:col-span-6 flex flex-col flex-1 md:mb-36 lg:mb-12 gap-y-8 md:self-end">

        <div class="w-full">
          {% if posts.count >= 6 %}
            {% include [
              'components/articles/previews/preview--' ~ posts[5].topper_type|default('text_only') ~ '-alt.twig',
              'components/articles/previews/preview--' ~ posts[5].topper_type|default('text_only') ~ '.twig'
            ] with { post: posts[5], class: 'aspect-[4/5]' } %}
          {% endif %}
        </div>
      </div>
    </div>

    {% set label = topper.cta_label ?: 'Explore content' %}
    {% include 'components/button-link.twig' with { href: archive_links.posts, label: label } %}
  </div>
</section>

{% endif %}