---
const { title, titleColor, description, descColor, bgColor } = Astro.props;
---

<div class={`container mx-auto ${bgColor}`}>
    <div class="grid grid-cols-3 relative">
        <div class={`col-span-3 sm:col-span-2 p-12 lg:p-24 lg:h-82 ${descColor}`}>
            <h2 class={`${titleColor} text-2xl`}><strong>Autoridades</strong> | Centro del Reino de Paz y Justicia</h2>
            <p>El <strong>Dr. José Benjamín Pérez Matos</strong> es el <strong>fundador y único referente del Centro del Reino de Paz y Justicia.</strong> Su liderazgo articula visión espiritual, formación intelectual, acción pública y proyección internacional.</p>
        </div>
        <div class="hidden sm:flex col-span-1 bg-secondary items-end self-end justify-center h-82 overflow-visible">
            <img src="/img/DRJBP-1.webp" class="w-48 sm:w-64 lg:w-76 object-contain absolute bottom-0" alt="">
        </div>
    </div>
</div>