<article class="card elevation-0 bg-grey-50 container-padding--zero md:container-padding--auto">
  <div class="card__body p-4 lg:p-8 flex space-x-8 items-start">
    <img src="/images/city-banner.png" class="w-16" />
    <div class="space-y-4 flex-grow">
      <div>
        <h1 class="head-alt-base mb-2"><a href="#">Svitavy</a></h1>
        <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          {{> atoms-responsive-contact-line(icon: "ico--envelope", caption: "svitavsko@pirati.cz", classes: "font-light") }}
          {{> atoms-contact-line(icon: "ico--facebook text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
        </div>
        <p class="mt-2 font-light text-sm leading-snug">{{ excerpt.short }}</p>
      </div>
      {{> molecules-condensed-badge(hideAvatar: true, hideOccupation: true) }}
    </div>
    <div class="hidden md:block">
      <a href="#" class="no-underline hover:no-underline"><i class="ico--chevron-right text-3xl"></i></a>
    </div>
  </div>
</article>
