troylusty.com/src/components/ShowcaseProject.astro

---
import { Image } from "astro:assets";
import type { CollectionEntry } from "astro:content";

type Props = {
  collection: CollectionEntry<"projects">;
};

const { collection } = Astro.props;
---

<li>
  <article class="flex-col overflow-clip">
    <a href={`/${collection.collection}/${collection.slug}`} class="group">
      <div class="overflow-hidden rounded-sm">
        <Image
          src={collection.data.image.url}
          alt={collection.data.image.alt}
          title={collection.data.title}
          loading="eager"
          class="aspect-[2/1] object-cover transition-all duration-300 ease-in-out group-hover:brightness-50"
          fit="cover"
        />
      </div>
    </a>
  </article>
</li>