{{ define "main" }}
<div class="bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="text-base text-primary font-semibold tracking-wide uppercase">{{ .Section }}</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-100 sm:text-4xl">{{ .Title }}</p>
            <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">{{ .Description }}</p>
        </div>

        <div class="mt-12 grid gap-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
            {{ range .Paginator.Pages }}
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="{{ with .Params.image }}{{ . }}{{ else }}/images/IMG_0599.jpeg{{ end }}" alt="{{ .Title }}">
                </div>
                <div class="flex-1 bg-gray-800 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-primary">
                            Article
                        </p>
                        <a href="{{ .RelPermalink }}" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-100">{{ .Title }}</p>
                            <p class="mt-3 text-base text-gray-300">{{ .Summary | truncate 150 }}</p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="text-sm text-gray-400">
                            <time datetime="{{ .Date }}">{{ .Date.Format "Jan 2, 2006" }}</time>
                        </div>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
        
        <!-- Pagination -->
        <div class="mt-10 flex justify-center">
            {{ template "_internal/pagination.html" . }}
        </div>
    </div>
</div>
{{ end }}