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

const { title, subtitle } = Astro.props;

console.log(subtitle);
---

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

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

  .title {
    @mixin heading-1;
  }


  .subtitle {
    @mixin mt var(--spacing-snug);

    font-family: var(--font-header);
    font-size: var(--typo-size-lg);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.075em;
  }
</style>
