<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
    <div class="flex-shrink-0">
      <img class="h-48 w-full mx-auto object-cover" src=/{{post.extra.imgPath}} alt="" />
    </div>
    <div class="flex-1 bg-white p-6 flex flex-col justify-between">
      <div class="flex-1">
        <a href={{ post.permalink }} class="block">
          <h3 class="mt-2 text-xl leading-7 font-medium text-gray-900 text-left not-italic">
            {{ post.title }}
          </h3>
          {% if post.description %}
          <p class="mt-3 text-sm font-normal leading-6 text-gray-500 text-left">
              {{ post.description }}
        </p>
        {% endif %}
        </a>
      </div>
      <div class="mt-6 flex items-center">
        <div>
          <p class="text-sm leading-5 font-medium text-gray-900 text-left">
              {{ post.extra.author }}
          </p>
          <div class="flex text-sm leading-5 text-gray-500 text-left">
            <time datetime="2020-03-16">
                {{ post.date | date(format="%B %e, %Y", timezone="America/Chicago") }}
            </time>
            <span class="mx-1">
              &#xB7;
            </span>
            <span>
              6 min read
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>