---
interface Props {
  heading?: string;
  content: string;
  id: string;
}
const { heading, content, id } = Astro.props;
const isPromo = id.includes('promo') || id.includes('banner');
---
<section class:list={["text-section", { promo: isPromo }]}>
  <div class="container">
    {heading && <h2>{heading}</h2>}
    <p>{content}</p>
  </div>
</section>

<style>
  .text-section h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.75rem;
  }
  .text-section p {
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.8;
    font-weight: 300;
    max-width: 680px;
  }
  .promo {
    background: color-mix(in srgb, var(--color-primary), white 90%);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 6px 6px 0;
    margin: 0 auto;
  }
  .promo .container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
</style>