---
import Container from "~/components/Container.astro";
---

<Container id="planos">
    <section class="space-y-5 lg:space-y-10 w-4/6 mx-auto">
        <h1 class="text-pretty text-4xl lg:text-6xl text-center">
            <!-- Escolha a melhor forma de contratação para sua empresa -->
            Formas de contratação
        </h1>
        <div class="grid grid-cols-3 gap-5 min-h-92">
            <div
                class="bg-white/10 border border-white/15 p-10 rounded-xl flex flex-col hover:outline outline-lime-400"
            >
                <h1>Plan A</h1>
                <ul class="list-disc list-inside">
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                </ul>
                <a
                    href="#"
                    class="font-medium bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block mt-auto text-center"
                >
                    Contratar
                </a>
            </div>
            <div
                class="bg-white/10 p-10 border border-white/15 rounded-xl flex flex-col hover:outline outline-lime-400"
            >
                <h1>Plan A</h1>
                <ul class="list-disc list-inside">
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                </ul>
                <a
                    href="#"
                    class="font-medium bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block mt-auto text-center"
                >
                    Contratar
                </a>
            </div>
            <div
                class="bg-white/10 p-10 border border-white/15 rounded-xl flex flex-col hover:outline outline-lime-400"
            >
                <h1>Plan A</h1>
                <ul class="list-disc list-inside">
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                    <li>Lorem ipsum</li>
                </ul>
                <a
                    href="#"
                    class="font-medium bg-lime-400 text-black hover:bg-white p-2.5 rounded-lg block mt-auto text-center"
                >
                    Contratar
                </a>
            </div>
        </div>
    </section>
</Container>