<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>

      <span
        class="
          text-lg font-bold mt-8
        "
      >
        {% if is_pirate %}
          <div class="flex gap-3 items-center">
            <img
              src="../../../../../static/images/badge.png"
              alt="Logo Pirátské strany"
              width="35"
              height="35"
            >

            Člen(ka) Pirátské strany
          </div>
        {% else %}
          <div class="flex gap-3 items-center">
            <img
              src="../../../../../static/images/badge_other.png"
              alt="Logo strany '{{ other_party_name }}'"
              width="35"
              height="35"
            >

            {{ other_party_name }}
          </div>
        {% endif %}
      </span>
    </h1>
  </div>
</header>
