Pattern Library

<div class="bg-pirati-yellow text-black py-24">
  <div class="container--medium mx-auto px-4">
    <h2 class="head-14xl xl:leading-[10.5rem] mb-4 xl:mb-8">
      {{ title }}
    </h2>
    <div class="flex flex-col flex-wrap mb-12">
      <div class="
        flex gap-1 font-alt flex-col

        lg:gap-4 lg:flex-row lg:items-center
      ">
        <div
          class="
            text-4xl flex items-center gap-1

            lg:text-6xl
          "
        >
          <div class="lg:block hidden">
            {% include 'patterns/atoms/icons/arrow.html' with width="66.6" height="70" fill="#000" %}
          </div>

          <div class="block lg:hidden">
            {% include 'patterns/atoms/icons/arrow.html' with width="33.3" height="35" fill="#000" %}
          </div>

          <div class="leading-none mt-2">
            Aktuálně zbývá
          </div>
        </div>
        <div
          class="
            text-4xl

            lg:text-6xl
          "
        >
          <span class="inline-block bg-black text-white p-4 leading-none mt-2 __js-root">
            <ui-countdown to="{{ ending_time }}"></ui-countdown>
          </span>
        </div>
      </div>
    </div>
    <div class="flex gap-4">
      {% include 'patterns/atoms/buttons/round_button.html' with classes='inline-block bg-black text-white' button_text=button_program_text %}

      {% include 'patterns/atoms/buttons/round_button.html' with classes='inline-block bg-black text-white' button_text=button_candidates_text %}
    </div>
  </div>
</div>