{{ partial:partials.navbar.navbarBlog}}
<main>
    <section id="section-1" class="flex flex-col w-full">
        <div class="flex flex-col w-full">
            <div class="bg-gray-100 h-[240px] flex items-center">
                <div class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full">
                    <h1
                        class="text-[40px] md:text-[70px] xl:text-[80px] font-bold text-black px-10"
                    >
                        {{title}}
                    </h1>
                </div>
            </div>
            <article
                class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full pt-[25px] lg:pt-[46px] px-10 pb-[40px]"
            >
                <div class="mb-8">{{partial:breadcrumbs}}</div>
            <div>
                <h1>Title: {{title}}</h1>
                <p>Description: {{description}}</p>
                <p>brand: {{brand}}</p>
                <div class="grid grid-cols-4 gap-4">
                    {{assets:images}}
                    <div class="w-full">
                        <img {{ if index === 0 }}id="primaryimage"{{ /if }}
                        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="" />
                    </div>
                    {{/assets:images}}
                </div>
            </div>
        </article>
    </section>
</main>