<div class="mt-12 py-8 border-t-2 flex flex-col md:flex-row justify-between items-center">
  <div class="flex flex-col mb-4 md:mb-0 md:flex-row items-center flex-1">
    <div class="border border-blue-600 dark:border-blue-400 bg-white rounded-full overflow-hidden mb-4 md:mb-0 md:mr-4 [&>*]:h-20 [&>*]:w-20 flex flex-col items-center">
      {% image './src/assets/img/avatar.webp', site.name, 'inline-block' %}
    </div>
    <span class="text-lg font-medium">{{ site.name }}</span>
  </div>
  <p class="text-sm flex-1">{{ site.description }}</p>
</div>