---
import { createTranslator, t } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);
---
<div class="bg-[#CBA16A] py-12 lg:py-20">
    <div class="container mx-auto">
    <h4 class="text-tertiary text-2xl uppercase font-bold text-center mb-8 font-primary">{tl("participate.title")}</h4>
    <h2 class="text-tertiary text-3xl lg:text-5xl font-bold lg:text-center font-secondary mb-4 text-center">{tl("participate.text")}</h2>

    <p class="text-tertiary font-normal pt-10 text-2xl px-12 text-center" set:html={tl("participate.text2")} />

    <div class="grid md:grid-cols-2 w-3/4 justify-center mx-auto gap-20 my-20">
        <div class="border-1 border-white text-lg p-8 text-tertiary">
            <h5 class="font-bold mb-6">{tl("participate.box1.title")}</h5>
            <p class="font-normal">{tl("participate.box1.text")}</p>
        </div>

        <!-- <div class="border-1 border-white p-8 text-tertiary">
            <h5 class="font-bold text-lg mb-6">Aportes y donaciones:</h5>
            <p>sostenimiento de programas y actividades.</p>
        </div> -->

        <div class="border-1 border-white p-8 text-tertiary">
            <h5 class="font-bold text-lg mb-6">{tl("participate.box2.title")}</h5>
            <p class="font-normal">{tl("participate.box2.text")}</p>
        </div>
    </div>
    <div class="flex justify-center">
            <p class="text-tertiary text-xl px-12 font-bold mx-auto">{tl("participate.text3")}</p>

    </div>
</div>
</div>