---
import { getEntry } from "astro:content";

const { data } = (await getEntry("diplomadoSections", "objetivos-especificos"))!;
---

<div class="flex flex-col gap-5 rounded-3xl bg-white/60 p-8 md:p-9" data-aos="fade-up">
  <h2 class="text-2xl font-bold text-corporative-yellow">{data.title}</h2>
  <div class="grid md:grid-cols-2 gap-x-6 gap-y-5">
    {
      data.items?.map((objective, index) => (
        <div class="flex items-start gap-3">
          <span class="flex items-center justify-center shrink-0 w-[30px] h-[30px] rounded-full bg-corporative-yellow text-[#261f00] text-sm font-bold">
            {index + 1}
          </span>
          <p class="text-base text-slate-600">{objective}</p>
        </div>
      ))
    }
  </div>
</div>