Features.astro

---
import Link from "./Link.astro";
import Grid2 from "./Grid2.astro";
import { site } from "../site";
import { md } from "../lib/utils";

const { features } = site;
---

<Grid2>
  {
    features.map(({ title, description, links }) => (
      <div class="space-y-4">
        <p
          class="text-lg font-bold md:text-xl lg:text-2xl"
          set:html={md(title)}
        />
        <p
          class="text-sm font-light md:text-base lg:text-lg"
          set:html={md(description)}
        />

        <ul>
          {links.map(({ text, href }) => (
            <li class="flex items-center space-x-2 md:text-lg lg:text-xl">
              <span>&rarr;</span>
              <Link
                {href}
                class="text-dark underline hover:text-primary dark:text-light-gray dark:hover:text-light-blue"
              >
                {text}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    ))
  }
</Grid2>