{{ partial:partials.navbar.navbar }}
<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div id="jumbotron" class="relative max-h-[645px] overflow-hidden">
            <div class="max-h-[645px] relative">
                {{assets:image}}
                <img
                    id="primaryimage"
                    srcset="{{ glide:url width='360' }} 360w,
                                    {{ glide:url width='640' }} 640w,
                                    {{ glide:url width='768' }} 768w,
                                    {{ glide:url width='1024' }} 1024w,
                                    {{ glide:url width='1280' }} 1280w,
                                    {{ glide:url width='1536' }} 1536w"
                    sizes="(min-width: 1536px) 1536px,
                                (min-width: 1280px) 1280px,
                                (min-width: 1024px) 1024px,
                                (min-width: 768px) 768px,
                                (min-width: 640px) 640px,
                                100vw"
                    data-src="{{ glide:url width='360' }}"
                    alt="{{ alt }}"
                    class="w-full h-full lg:min-h-[645px] object-cover z-10"
                />
                {{/assets:image}}
                <div
                    class="w-full absolute top-1/2 left-0 transform -translate-y-1/2 lg:-translate-y-0 lg:top-[300px] lg:left-[10px] lg:px-0"
                >
                    <div
                        class="max-w-3xl mx-auto px-7 lg:px-0 lg:max-w-5xl xl:max-w-7xl"
                    >
                        <h2
                            class="text-[35px] sm:text-[58px] lg:text-[100px] xl:text-[128px] leading-tight text-white font-bold font-poppins"
                        >
                            {{title_sec_1}}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <article class="max-w-7xl mx-auto py-[50px] px-10">
            <div class="mb-8 px-0 md:px-4">{{partial:breadcrumbs}}</div>
            {{ taxonomy:categories title:contains="{title}" }}
            <div
                id="posts-container"
                class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
            >
                {{ entries paginate="6" as="posts" sort="date:desc" }} {{posts}}
                <div class="flex flex-col w-full md:px-4 mb-4 lg:mb-0 pb-8">
                    <div class="w-full overflow-hidden">
                        <a href="{{url}}">
                            {{assets:image}}
                            <img
                                data-srcset="{{ glide:url width='360' }} 360w,
                                    {{ glide:url width='640' }} 640w,
                                    {{ glide:url width='768' }} 768w,
                                    {{ glide:url width='1024' }} 1024w,
                                    {{ glide:url width='1280' }} 1280w,
                                    {{ glide:url width='1536' }} 1536w"
                                sizes="auto"
                                data-src="{{ glide:url width='360' }}"
                                alt="{{ alt }}"
                                class="object-cover z-10 lazyload"
                            />
                            {{/assets:image}}
                        </a>
                    </div>
                    <div
                        class="mt-6 text[9px] sm:text-[13px] flex flex-col sm:flex-row justify-between sm:items-center gap-2"
                    >
                        <a class="italic" href="#">{{date format="d/m/Y"}}</a>
                        <div
                            class="font-bold md:w-[235px] text-ellipsis whitespace-nowrap overflow-hidden"
                        >
                            {{ categories }}
                            <a href="/categories/{{slug}}">{{ title }}</a>{{ if
                            !last }}, {{ /if }} {{ /categories }}
                        </div>
                        <a class="font-bold" href="/authors/{{authors:slug}}"
                            >{{authors:title}}</a
                        >
                    </div>
                    <h3 class="text-2xl font-bold my-4">
                        <a href="{{url}}">{{title}}</a>
                    </h3>
                    <div class="[&>p>img]:hidden">
                        {{ article_content }} {{ if type == "text" && first }}
                        {{ text | truncate(304, '...') }}{{/if}} {{
                        /article_content }}
                    </div>
                    <a href="{{url}}" class="text-sm font-semibold mt-4"
                        ><span class="mr-2">EXPLORE</span
                        ><i class="fa-solid fa-angle-right"></i>
                    </a>
                </div>
                {{/posts}}
            </div>
            <!--  -->
            {{ paginate }} {{partial:pagination}} {{ /paginate }}
            <!--  -->
            {{ /entries }} {{ /taxonomy:categories }}
        </article>
    </section>
    <!-- Section 3 -->
    <section id="section-3">
        <div class="bg-[#bb1a14]">
            <div
                class="max-w-7xl mx-auto h-[276px] md:h-[186px] flex flex-col md:flex-row justify-between lg:items-center py-[65px] px-[40px]"
            >
                <h1 class="text-3xl text-white italic">{{title_sec_3}}</h1>
                <a
                    class="w-max h-max text-[14px] border-2 border-white py-4 px-8 text-white font-bold tracking-widest uppercase hover:text-[#bb1a14] hover:bg-white transition duration-300 ease-in-out"
                    href="{{link_cta}}"
                >
                    {{label_cta}}
                </a>
            </div>
        </div>
    </section>
</main>