---
layout: base
---
<div class="flex justify-center py-8 ">
  <article class="text-center prose prose-p:font-extralight prose-slate dark:prose-invert primary-underline">
    {{ content }}
  </article>
</div>

<div class="md:w-4/5 mx-auto gap-4 md:gap-6 columns-2 md:columns-3 mb-10">
  {% for post in site.posts %}
  <div class="md:fadeIn border-b pb-8 mb-8 break-inside-avoid-column ">
    <div class="hover:underline hover:decoration-2 hover:underline-offset-4 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-104 duration-300">
      <a href="{{ post.url }}" >
        <img src="{{ post.image }}" alt="" class="w-full max-w-screen-sm h-auto shadow-md">
        <h2 class="text-lg md:text-xl lg:text-2xl pt-5 text-ellipsis overflow-hidden">{{post.title}}</h2>
      </a>
    </div>

    <div class="pt-2">
      {% for tag in post.tags limit:3 %}
      <span class="text-xs text-slate-700 dark:text-slate-100/80 align-middle">#{{tag}}</span>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>