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">
    <div class="text-white flex flex-col">
      {% include 'patterns/atoms/header/navigation.html' with classes='mb-10' first_text='Lidé' second_text='Sněmovna' %}

      <div
        class="
          flex gap-12 flex-nowrap flex-col

          lg:flex-row
        "
      >
        <img
          class="rounded-full w-52 h-52"
          src="../../../../../static/images/person-table.png"
          alt="Profilový obrázek"
        >

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

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

            <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 %}
            </div>
          </div>
        </div>
      </span>
    </div>
  </div>
</header>