{{!< default}}

<section class="container mx-auto px-4 py-20 md:py-32 flex flex-col items-center justify-center text-center">
    <h1 class="text-9xl font-bold tracking-tighter text-[var(--brand-primary)] opacity-20 mb-4">404</h1>
    <h2 class="text-4xl md:text-6xl font-bold mb-12">Page Not Found</h2>
    
    <a href="{{@site.url}}" class="btn-primary">
        <span class="mr-2">{{> "icons/arrow-left" class="w-4 h-4"}}</span> Back to Home
    </a>

    {{#get "posts" limit="3" include="tags,authors"}}
        {{#if posts}}
            <div class="mt-24 w-full">
                <h3 class="text-3xl font-bold mb-10 text-[var(--brand-primary)]">Perhaps read something else?</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                    {{#foreach posts}}
                        {{> "post-card"}}
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
    {{/get}}
</section>