---
export interface Props {
  title: string;
  description: string;
  imageSrc: string;
  href: string;
}

const { href, title, imageSrc, description } = Astro.props;
---

<div class="col">
  <a href={href} class="fp-link">
    <div class="card">
      <img src={`/images/${imageSrc}`} class="card-img-top" />
      <div class="card-body">
        <h5 class="card-title">{title}</h5>
        <p class="card-text">in which {description}</p>
      </div>
    </div>
  </a>
</div>

<style lang="scss">
  .card {
    margin-bottom: 20px;
  }

  .fp-link {
    display: inline-flex;
    text-decoration: none;
    margin: 5px;
  }

  .fp-link .card {
    //background-color: rgb(142, 181, 222);
    color: #555;
    border-radius: 0;
    border: 0;

    img {
      border-radius: 5px;
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }

    .card-body {
      color: white;
      position: absolute;
      bottom: 5px;
      left: 12px;
    }

    .card-title {
      font-size: large;
    }

    .card-text {
      font-size: medium;
    }
  }
</style>