---
const { colorText, bgColor } = Astro.props;

import { createTranslator } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);

---

<div id="somos" class="container mx-auto">

    <div class="grid grid-cols-1 md:grid-cols-3 bg-white">
        <div class="bg-[#22523F] col-span-1 flex items-center justify-center bg-[url('/src/assets/mid-logo-2.webp')] bg-no-repeat bg-right md:bg-left">
            <img src="/img/logo-metalico.webp" alt="" class="w-1/4 my-8 md:w-1/2" />
        </div>
        <div class={`flex flex-col text-tertiary col-span-2 gap-8 py-8 md:py-16 lg:py-24 px-8 sm:px-16 lg:px-32`}>
            <h2 class="font-primary text-xl md:text-3xl font-bold">{tl("identity.initTitle")}</h2>
            <h2 class="font-secondary text-3xl md:text-5xl  font-bold">{tl("identity.title")}</h2>
            <div class="prose-p:text-lg prose-p:font-primary prose-p:leading-relaxed prose-p:text-justify prose-p:mb-4">
                <p set:html={tl("identity.body")} />
            </div>
        </div>
    </div>

</div>