<template>
  <div class="wrapper-card">
    <img :src="img(imgSrc)" :alt="imgAlt" class="image" />
    <h2 class="subtitle">{{ title }}</h2>
    <p class="description">{{ description }}</p>
  </div>
</template>

<script lang="ts" setup>
import { img } from '../../utils/image'
defineProps({
  title: { type: String, default: null },
  description: { type: String, default: null },
  imgSrc: { type: String, default: null },
  imgAlt: { type: String, default: null }
})
</script>

<style lang="scss" scoped>
.wrapper-card {
  display: flex;
  flex-direction: column;
}
.subtitle {
  @include text(h2);
  max-width: toRem(25);
  color: var(--blue-dark);
}
.image {
  height: toRem(7);
  width: fit-content;
  margin-bottom: toRem(1);
}
.description {
  margin: 0;
  color: var(--grey-dark);
}
@media (max-width: toRem(76.8)) {
  .subtitle {
    max-width: 100%;
  }
}
</style>
