---
interface Props {
  title: string;
  subtitle?: string;
}

const { title, subtitle } = Astro.props;

console.log(subtitle);
---

<div class="wrapper content">
  <h1 class="title">{title}</h1>
  {subtitle && <p class="subtitle">{subtitle}</p>}
</div>

<style>
  .wrapper {
    @mixin layout-wrapper;
    @mixin py var(--space-7);
  }

  .title {
    @mixin typo_display-1;
    @mixin my var(--space-2);
  }


  .subtitle {
    @mixin mt var(--size-4);
    @mixin typo_subtitle;

    color: var(--color-text-tertiary);
  }
</style>
