---
import { getCollection, getEntry } from "astro:content";
import NewsCard from "../cards/NewsCard.astro";
const newsItems = await getCollection("news");
---
<div id="news" class="bg-[#22523F] py-12 lg:py-20">
    <div class="container mx-auto">
    <div class="flex flex-col lg:w-1/2 items-center mx-auto py-8">
        <h4 class="text-white text-2xl uppercase font-bold text-center mb-4 font-primary">Noticias</h4>
    <h2 class="text-white text-3xl lg:text-5xl font-bold text-center font-secondary mb-4">Actualidad institucional y proyección internacional</h2>
    <p class="text-white text-xl text-center">Esta sección reúne las principales actividades, reconocimientos y acciones del Centro del Reino de Paz y Justicia y de su fundador.</p>
    </div>
    

    <div class="grid md:grid-cols-2 lg:grid-cols-3 md:gap-10 gap-20">
    {
		newsItems.map((item) => (
            <NewsCard data={item} />
		))
	}
    </div>
    </div>
</div>