<div class="container mx-auto px-4 py-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {{ range first 3 (where .Site.RegularPages "Section" "proyectos") }}
        <div
            class="hover:scale-120 hover:z-2 transform-3d hover:rotate-z-2 duration-100 hover:-translate-y-2
                    bg-white rounded-lg shadow-md overflow-hidden border-3 hover:shadow-xl ease-in"
        >
            {{ if .Params.image }}
            <img
                src="{{ .Params.image }}"
                alt="{{ .Title }}"
                class="w-full h-48 object-cover"
            />
            {{ else }}
            <div
                class="w-full h-48 bg-gray-200 flex items-center justify-center"
            >
                <span class="text-gray-500">No image</span>
            </div>
            {{ end }}

            <div class="p-4">
                <h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
                <p class="text-gray-700 mb-4">
                    {{ with .Params.description }}{{ . | truncate 150 }}{{ else
                    }}{{ .Summary | truncate 150 }}{{ end }}
                </p>

                <div class="flex justify-between items-center">
                    <a
                        href="{{ .Permalink }}"
                        class="text-blue-500 hover:text-blue-700"
                        >Ver más</a
                    >

                    {{ with .Params.tags }}
                    <div class="flex flex-wrap">
                        {{ range first 2 . }}
                        <span
                            class="text-xs bg-gray-200 rounded-full px-2 py-1 mr-1 mb-1"
                        >
                            {{ . }}
                        </span>
                        {{ end }}
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
        {{ end }}
    </div>
</div>
