---
interface Props {
  title: string;
  points: Array<string>;
}

const { title, points } = Astro.props;
---

<div>
  <p>{title}</p>
  <ul>
    { points.map((skill) => (
      <li>
        {skill}
      </li>
    ))}
  </ul>
</div>

<style lang="scss">
p {
  text-align: center;
  font-size: 1.75rem;
}
div {
  width: calc(100% * 1/3);
}
ul {
  list-style: none;
  padding: unset;
  text-align: center;

  li {
    font-size: 1.25rem;
    padding-bottom: 0.25rem;
  }
}
</style>