<a href="{{ post.url }}"class="group relative rounded-lg text-gray-100 shadow-md">

  <!-- A container for the preview -->
  <div class="model-image-container flex bg-gray-700 rounded-lg overflow-hidden">
    <img class="m-2 border-t-3 object-contain w-full h-full group-hover:scale-110 transition ease-in-out" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
  </div>

  <!-- The model title and description -->
  <div class="model-info text-gray-100 backdrop-blur-sm p-5 absolute bottom-0 left-0 right-0 bg-black/40 group-hover:bg-black/50 transition ease-in-out rounded-b-lg">
    <h5 class="text-2xl not-italic uppercase font-bold">{{post.data.title}}</h5>
    <p>{{post.data.alt}}</p>
  </div>
</a>
