{{ partial:partials.navbar.navbarTextBlack }}
<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] leading-tight text-black font-bold font-poppins"
                        >
                            {{title_sec_1}}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <div
            class="max-w-7xl mx-auto flex flex-col md:flex-row mt-[46px] px-4 md:px-8"
        >
            <article class="w-full md:w-2/3 px-6 pb-6">
                <div class="mb-4">{{partial:breadcrumbs}}</div>
                <div>
                    {{taxonomy:categories title:contains="Pameran" }}
                    <!--  -->
                    {{ entries paginate="10" as="posts" sort="date:desc" }}
                    <!--  -->
                    {{posts}}
                    <div class="mb-12">
                        <div>
                            <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="lazyload"
                                />
                                {{/assets:image}}
                            </a>
                        </div>
                        <div class="flex gap-6 items-center text-[13px] my-4">
                            <span class="italic">{{date format="d/m/Y"}}</span>
                            <span class="font-bold">
                                {{ categories }}
                                <a href="/categories/{{slug}}">{{ title }}</a>{{
                                if !last }}, {{ /if }} {{ /categories }}
                            </span>
                            <a
                                href="/authors/{{authors:slug}}"
                                class="font-bold"
                                >{{authors:title}}</a
                            >
                        </div>
                        <h1 class="text-2xl font-bold mb-4">
                            <a href="{{url}}">{{title}}</a>
                        </h1>
                        <div class="text-[#1F2347] leading-loose mb-4">
                            {{ article_content }} {{ if type == "text" && first
                            }} {{ text | truncate(304, '...') }}{{/if}} {{
                            /article_content }}
                        </div>
                        <a
                            class="flex items-center gap-2 text-sm font-bold tracking-wide"
                            href="{{url}}"
                            ><span>EXPLORE</span
                            ><i class="fa-solid fa-angle-right"></i
                        ></a>
                    </div>
                    {{/posts}}
                    <!--  -->
                    {{ paginate }} {{partial:pagination}} {{ /paginate }}
                    <!--  -->
                    {{ /entries }} {{/taxonomy:categories }}
                </div>
            </article>
            <aside class="w-full md:w-1/3 px-6 pb-6">{{partial:sidebar}}</aside>
        </div>
    </section>
</main>