Pattern Library

<header
  class="
    flex items-center mb-4 w-full pt-96 pb-16
    bg-no-repeat bg-cover bg-center bg-blend-darken bg-[top_right_-7rem] bg-[#00000088]
    xl:mb-20 xl:bg-center xl:py-52
  "
  style="background-image: url('../../../../../static/images/background-images/bg-bartos.jpg')"
>
  <div class="container--wide w-full">
    <h1 class="text-white flex flex-col">
      {% include 'patterns/atoms/header/navigation.html' with classes='mb-10' first_text='Lidé' second_text='Sněmovna' %}

      <span
        class="
          text-xl font-alt
          sm:text-4xl
        "
      >{{ degree_before }}</span>

      <div class="flex items-baseline flex-col xl:flex-row font-alt">
        <span class="font-alt text-6xl xl:text-9xl grow xl:grow-0">{{ name }}</span>

        <span class="text-2xl xl:text-4xl">
          <span class="hidden xl:inline">, </span>{{ degree_after }}
        </span>
      </div>

      <span
        class="
          text-lg font-bold mt-8
          xl:mt-[-0.7rem]
        "
      >{{ function }}</span>
    </h1>
  </div>
</header>