---
/**
 * Container — largeur max + gouttières cohérentes.
 *
 * Props :
 *  - size  ('base' | 'narrow', 'base') : --container-max ou 45rem (lecture)
 *  - class (string) : classes additionnelles
 */
interface Props {
  size?: "base" | "narrow";
  class?: string;
}

const { size = "base", class: className } = Astro.props;
---

<div class:list={["tf-container", { "tf-container--narrow": size === "narrow" }, className]}>
  <slot />
</div>

<style>
  .tf-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .tf-container--narrow {
    max-width: 45rem;
  }
</style>