Pattern Library

<div class="bg-pirati-yellow">
  <div class="container--medium __js-root">
    <div class="py-16 xl:py-24">
      <div class="__js-root">
        <h2
          class="
            text-7xl font-alt head-compact
            xl:flex xl:gap-6 xl:text-14xl
          "
        >
          <div class="hidden xl:block mr-[-2rem]">
            <ui-animated-arrow
              desktop-width="142.8"
              desktop-height="150"
            ></ui-animated-arrow>
          </div>

          <span class="flex gap-2">
            <ui-animated-arrow
              mobile-width="66.6"
              mobile-height="70"
            ></ui-animated-arrow>
            Volby do Evropy
          </span>
        </h2>
      </div>
    </div>

    <ui-horizontal-scrollable
      classes="
        flex gap-8 overflow-x-scroll mt-4 mb-8
        lg:mt-0 lg:grid lg:grid-cols-2
        xl:grid-cols-3
      "
      scroller-classes="!text-black"
    >
      {% include 'patterns/molecules/boxes/card_box.html' %}
      {% include 'patterns/molecules/boxes/card_box.html' %}
      {% include 'patterns/molecules/boxes/card_box.html' %}
    </ui-horizontal-scrollable>

    <div
      class="
        flex justify-center py-12
        xl:py-24
      "
    >
      {% include "patterns/atoms/buttons/round_button.html" with button_text=button_text %}
    </div>
  </div>
</div>