---
export interface Props {
  title: string;
  subtitle: string;
  text: string[];
}

// Default props
const { title, subtitle, text } = Astro.props;
---

<div class="flex flex-col gap-10">
  <h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
    {title}
  </h2>

  <h3 class="font-display text-4xl md:text-6xl font-bold">
    {subtitle}
  </h3>

  {
    text.map((paragraph) => (
      <p class="font-body text-xl md:text-2xl text-body">
        <Fragment set:html={paragraph} />
      </p>
    ))
  }
</div>
