<div class="bg-pirati-yellow">
  <div class="container--wide">
    <div
      class="
        flex items-start py-16 flex-col gap-8

        xl:py-24

        __js-root
      "
    >
      <h2
        class="head-10xl"
      >
        {{ title }}
      </h2>

      <div class="w-full">
        <ui-horizontal-scrollable
          classes="
            flex gap-8 overflow-x-scroll mt-4 mb-8 duration-150 py-5

            lg:mt-0 lg:grid lg:grid-cols-2 lg:overflow-x-visible

            xl:grid-cols-3
          "
          scroller-classes="!text-black"
        >
          {% include 'patterns/molecules/candidates/elections/candidate_footer_box.html' %}
          {% include 'patterns/molecules/candidates/elections/candidate_footer_box.html' %}
          {% include 'patterns/molecules/candidates/elections/candidate_footer_box.html' %}
        </ui-horizontal-scrollable>
      </div>
    </div>
  </div>
</div>
