<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
  <div class="flex-shrink-0">
    {% set img_url = get_url(path='/' ~ post.relative_path | replace(from='_', to='-') | replace(from='index.md',
    to=post.extra.imgPath)) %}
    <img class="h-48 w-full mx-auto object-cover" src="{{img_url}}" 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>
