elections-hero-multiple-candidacies.mustache

<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center text-center md:text-left">
    <div class="lg:row-span-2 lg:col-span-3 order-1">
      {{> atoms-basic-flag(font: "bg-violet-400 text-white head-alt-base", cta: "Volte č. 2", classes: "mb-6") }}
      <h1 class="head-alt-md md:head-alt-xl text-shadow-lg">Krajské volby 2020</h1>
    </div>
    <div class="lg:row-span-1 lg:col-span-3 order-3">
      <div class="mt-4 md:mt-8 space-y-4 md:space-x-2 md:space-y-0">
        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
      </div>
    </div>
    <div class="lg:row-span-3 lg:col-span-4 order-2">
      <img src="/images/hero-profile-img.png" class="h-32 lg:h-80 lg:m-auto hidden md:block object-contain" />
    </div>
  </div>
  <div class="container container--default text-white text-center md:text-left">
    <hr class="hr--big opacity-25" />
    <div class="leading-loose grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 text-shadow-lg text-base md:text-sm">
      <span><a href="#" class="font-bold">Radnice</a></span>
      <span><a href="#">Praha 1</a></span>
      <span><a href="#">Praha 2</a></span>
      <span><a href="#">Praha 3</a></span>
      <span><a href="#">Praha 4</a></span>
      <span><a href="#">Praha 5</a></span>
      <span><a href="#">Praha 6</a></span>
      <span><a href="#">Praha 7</a></span>
      <span><a href="#">Praha 8</a></span>
      <span><a href="#">Praha 9</a></span>
      <span><a href="#">Praha 10</a></span>
      <span><a href="#">Praha 11</a></span>
      <span><a href="#">Praha 12</a></span>
    </div>
  </div>
</article>