---
interface Props {
  class?: string;
  ariaLabelledby?: string;
}

const { class: className, ariaLabelledby } = Astro.props;
---

<section class:list={["section", className]} aria-labelledby={ariaLabelledby}>
  <div class="container">
    <slot />
  </div>
</section>

<style>
  .section {
    padding: var(--space-lg) 0;
  }

  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    width: 100%;
  }
</style>
