Pattern Library

<div
  class="
    flex flex-col grow bg-grey-180

    xl:gap-8 xl:flex-row

    {{ classes }}
  ">
  <div class="xl:shrink-0">
    <a href="{{ url }}">
      <img
        class="h-full w-full xl:w-60 object-cover"
        src="{{ image_url }}"
        alt=" {{ name }}"
      >
    </a>
  </div>
  <div>
    <div
      class="
        flex flex-col justify-between py-4 px-4 h-full
        xl:px-0 xl:pr-4
      "
    >
      <div class="flex flex-col">
        <a
          class="hover:no-underline block font-bold mb-1 text-xl xl:text-3xl"
          href="{{ url }}"
        ><h4>{{ name }}</h4></a>

        <span class="leading-6 mb-4 xl:mb-6">
          {{ function }}
        </span>
      </div>

      <div class="flex flex-col">
        <a
          class="font-bold mb-2"
          href="tel:{{ telephone }}"
        >{{ telephone }}</a>

        <a
          class="font-bold"
          href="mailto:{{ mail }}"
        >{{ mail }}</a>

        <div class="flex mt-5">
          {% include 'patterns/atoms/buttons/round_button_small.html' with button_text='Zjisti více' %}
        </div>
      </div>
    </div>
  </div>
</div>