Pattern Library

<div class="{% block wrapper_classes %}bg-black text-white{% endblock %}">
  <div class="container--medium __js-root">

    <!-- NOTE: This will change once europarl section exists. py-16 xl:py-24 -->
    <div
      class="
        xl:block hidden

        pt-0 pb-16 xl:pt-6 xl:pb-24
      "
    >
      <h2>
        <span class="head-14xl leading-[10.5rem]">{{ first_line }}</span><br>
        <div class="flex gap-12">
          <span class="head-14xl leading-[10.5rem]">{{ second_line }}</span>
          <p class="max-w-[650px] text-lg pt-1.5">
            {{ representative_section_desc }}
          </p>
        </div>
      </h2>
    </div>

    <div class="xl:hidden block pt-24 pb-12">
      <h2 class="head-14xl">
        {{ first_line }}
        {{ second_line }}
      </h2>

      <p>
        {{ representative_section_desc }}
      </p>
    </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-4
      "
    >
      {% include 'patterns/molecules/boxes/image_with_button_box.html' %}
      {% include 'patterns/molecules/boxes/image_with_button_box.html' with desc_text='Předsednictva MS' %}
      {% include 'patterns/molecules/boxes/image_with_button_box.html' %}
      {% include 'patterns/molecules/boxes/image_with_button_box.html' %}
    </ui-horizontal-scrollable>

    <div
      class="
        flex justify-center py-12
        xl:py-24
      "
    >
      {% include 'patterns/atoms/buttons/round_button.html' with classes='inline-block bg-white text-black' button_text=button_text %}
    </div>
  </div>
</div>