---
interface Props {
  background?: string
  class?: string
}

const { background, class: className } = Astro.props

const sectionClass = ['section', background && `section-${background}`, className]
---

<section class:list={sectionClass}>
  <div class="container">
    <div class="row justify-content-lg-center">
      <div class="col-sm-6 col-lg-3">
        <div class="text-center">
          <h2 class="display-5 m-0 fw-bold">48</h2>
          <p class="text-secondary m-0">templates</p>
        </div>
      </div>

      <div class="col-sm-6 col-lg-3">
        <div class="text-center">
          <h2 class="display-5 m-0 fw-bold">12</h2>
          <p class="text-secondary m-0">years in business</p>
        </div>
      </div>

      <div class="col-sm-6 col-lg-3">
        <div class="text-center">
          <h2 class="display-5 m-0 fw-bold">2,5k+</h2>
          <p class="text-secondary m-0">copies sold</p>
        </div>
      </div>

      <div class="col-sm-6 col-lg-3">
        <div class="text-center">
          <h2 class="display-5 m-0 fw-bold">99%</h2>
          <p class="text-secondary m-0">happy customers</p>
        </div>
      </div>
    </div>
  </div>
</section>