---
import { Container } from '../container';

interface Props {
  text: string;
}

const { text } = Astro.props;
---

<section class="about">
  <Container tight>
    <h2 class="title">About this tool</h2>
    <p class="text">{text}</p>
  </Container>
</section>

<style>
  .about {
    margin-top: 75px;

    & .title {
      margin-bottom: 8px;
      font-family: var(--font-heading);
      font-size: var(--font-md);
      font-weight: 600;
    }

    & .text {
      color: var(--color-foreground-subtle);
    }
  }
</style>