cats-album/src/components/CatCard.astro

---
import { type CollectionEntry } from 'astro:content';

export interface Props {
  cat: CollectionEntry<'cats'>;
}

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

<a class="card-link-wrapper" href={`/cats/${cat.id}`}>
  <div class="card is-center">
    <div class="img-wrapper">
      <img
        class:list={[{ 'passed-away': cat.data.passedAway }]}
        src={cat.data.image.src}
        alt={cat.data.image.alt}
        loading="lazy"
        decoding="async"
        width="350"
        height="250"
      />
      {cat.data.passedAway && <span class="rip">Rest In Peace</span>}
    </div>
    <h3>{cat.data.name}</h3>
    <p>{cat.data.owner.name}</p>
  </div>
</a>

<style>
  .card-link-wrapper {
    color: var(--font-color);
  }

  .card-link-wrapper:hover {
    opacity: 1;
  }

  a:focus {
    outline-width: 5px;
  }

  .card {
    margin: 0.5rem 0;
    padding: 0;
    flex-direction: column;
    transition-duration: 300ms;
  }

  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--color-grey);
  }

  .card h3 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .card p {
    margin-bottom: 1.25rem;
  }

  .img-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 2rem;
    padding-bottom: 0.6rem;
  }

  .card img {
    display: block;
    width: 100%;
    object-fit: cover;
  }

  .card span.rip {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 4rem);
    margin: 0 2rem 0.5rem 2rem;
    padding: 0.25rem;
    background-color: #000;
    text-align: center;
  }
</style>