firq-dev-website/src/components/favouriteCard.astro

---
export interface Props {
  name: string
  origin: string
  image: string
  link: string
}

const { link, image, origin, name } = Astro.props

const img: string = `/favourites/${image}.webp`
---

<a href={link} target="_blank" rel="noopener noreferrer">
  <article>
    <div class="heading">{name}</div>
    <img src={img} alt={name} />
    <h2 class="subtext">
      {origin}
    </h2>
  </article>
</a>

<style>
  a {
    text-decoration: none;
  }
  .heading {
    display: flex;
    height: 4rem;
    font-size: 22px;
    color: white;
    max-width: 200px;
    padding-bottom: 0.3rem;
    font-weight: bold;
    margin: 0px;
    justify-content: center;
    align-items: center;
  }

  .servants-container {
    row-gap: 1em;
    column-gap: 1em;
    justify-content: center;
    align-self: center;
    align-content: center;
  }

  article:hover {
    transform: scale(var(--hover-scale));
  }

  article {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: var(--c-darkergray);
    border-color: var(--c-darkgray);
    padding: 0em 0.75em;
    width: 40%;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform var(--speed) var(--ease);
  }

  article > img {
    padding: 0.25em;
    width: 120px;
    height: auto;
  }

  @media (min-width: 512px) {
    article {
      padding: 10px 10px;
      width: auto;
      height: auto;
    }

    article > img {
      padding: 1.5em;
      width: 200px;
      height: auto;
    }
  }

  .subtext {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 5;
    line-height: 20px;
  }
</style>