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

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

<div class="container">
  <div class="icon-container mb-8">
    <slot name="icon" />
  </div>
  <h3 class="mb-2">{title}</h3>
  <p>{description}</p>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;

    & p {
      max-width: 300px;
      line-height: 1.1;
      text-align: center;
    }

    & .icon-container {
      & svg {
        height: 100%;
        width: 100%;
      }
    }
  }
</style>