Pattern Library

<div class="flex grow flex-col gap-0 md:flex-row md:gap-8">
  <div class="md:shrink-0">
    <a href="{{ url }}">
      <img
        class="h-36 w-36 object-cover rounded-full"
        src="{{ image_url }}"
        alt=" {{ name }}"
      >
    </a>
  </div>
  <div>
    <div class="flex flex-col justify-between py-4 pr-4 h-full">
      <div class="flex flex-col">
        <a
          class="hover:no-underline block font-bold font-alt leading-8 tracking-wide text-xl md:text-2xl xl:text-3xl"
          href="{{ url }}"
        ><h4>{{ name }}</h4></a>

        <span class="leading-6 mb-4 md:mb-6 w-10/12 text-grey-200">
          {{ function }}
        </span>
      </div>

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

        <a
          class="text-pirati-yellow"
          href="mailto:{{ mail }}"
        >{{ mail }}</a>
      </div>
    </div>
  </div>
</div>