Card

<a class="bg-background border border-black-100 dark:border-black-500 rounded-12px no-underline transition-all overflow-hidden hover:shadow-lg flex flex-col min-w-[200px] max-w-[300px]">
  <div class="aspect-[30/25] h-full w-full bg-black-50 dark:bg-black-800">
    <img
      class="h-full w-full object-cover"
      alt="card caption"
      loading="lazy"
      src="/assets/images/home/card-image.jpg">
    </img>
  </div>
  <div class="flex flex-col p-16px gap-16px my-auto whitespace-nowrap">
    <div class="flex flex-col gap-4px">
      <p class="text-h8">
        Title
      </p>
      <p class="text-p2">
        Subtitle
      </p>
    </div>
    <div class="flex flex-wrap gap-16px items-center text-black-700 dark:text-black-200">
      <div class="flex gap-12px items-center">
        <div class="flex rounded-full overflow-hidden w-32px h-32px">
          <img
            src="/assets/images/shared/avatar.png"
            class="object-cover w-full h-full"
            loading="lazy"
            alt="avatar">
          </img>
        </div>
        <p class="text-p2">
          Kaida
        </p>
      </div>
      <div class="h-12px w-[1px] bg-black-200">
      </div>
      <p class="text-p3">
        Sep 6, 2024
      </p>
    </div>
  </div>
</a>

<a class="bg-background border border-black-100 dark:border-black-500 rounded-12px no-underline transition-all overflow-hidden hover:shadow-lg grid grid-cols-2 min-h-[250px] w-full max-w-[632px]">
  <div class="aspect-[30/25] h-full w-full bg-black-50 dark:bg-black-800">
    <img
      class="h-full w-full object-cover"
      alt="card caption"
      loading="lazy"
      src="/assets/images/home/card-image.jpg">
    </img>
  </div>
  <div class="flex flex-col p-16px gap-16px my-auto whitespace-nowrap">
    <div class="flex flex-col gap-4px">
      <p class="text-h8">
        Title
      </p>
      <p class="text-p2">
        Subtitle
      </p>
    </div>
    <div class="flex flex-wrap gap-16px items-center text-black-700 dark:text-black-200">
      <div class="flex gap-12px items-center">
        <div class="flex rounded-full overflow-hidden w-32px h-32px">
          <img
            src="/assets/images/shared/avatar.png"
            class="object-cover w-full h-full"
            loading="lazy"
            alt="avatar">
          </img>
        </div>
        <p class="text-p2">
          Kaida
        </p>
      </div>
      <div class="h-12px w-[1px] bg-black-200">
      </div>
      <p class="text-p3">
        Sep 6, 2024
      </p>
    </div>
  </div>
</a>