{{ partial:partials.navbar.navbar }}
<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div id="jumbotron" class="w-full lg:max-h-[600px] overflow-hidden">
            <div
                class="w-full min-h-[600px] lg:bg-[#393939] flex flex-col lg:flex-row lg:justify-end"
            >
                <div
                    class="w-full lg:w-1/3 bg-[#393939] text-white flex justify-end items-center"
                >
                    <div
                        class="w-full lg:w-[325px] pl-[30px] sm:pl-[90px] md:pl-[140px] lg:pl-0 pr-4 py-[82px]"
                    >
                        <h1
                            class="w-max lg:w-auto text-[34px] lg:text-[40px] font-bold leading-tight"
                        >
                            {{title_sec_1}}
                        </h1>
                        <div class="my-4">{{partial:big-line-svg}}</div>
                        <p class="text-xl italic">{{subtitle_sec_1}}</p>
                    </div>
                </div>
                <div
                    class="w-full flex justify-center items-center lg:w-2/3 sm:min-h-[600px] overflow-hidden"
                >
                    {{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 object-cover h-[320px] sm:h-[551px] md:h-[600px]"
                    />
                    {{/assets:image}}
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2 -->
    <section id="section-2">
        <div class="mt-8 px-[50px] xl:px-[100px]">{{partial:breadcrumbs}}</div>
        <div
            class="flex flex-col md:flex-row gap-10 px-[50px] xl:px-[100px] pt-[20px] mb-[50px]"
        >
            {{data_building_materials_sec_2}}
            <div class="w-full md:w-1/3">
                <h1 class="text-[40px] md:text-[35px] font-bold">{{title}}</h1>
                <div class="mt-4 mb-8">{{partial:line-svg}}</div>
                {{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}}

                <div class="text-base mt-6">{{description | nl2br }}</div>
            </div>
            {{/data_building_materials_sec_2}}
        </div>
    </section>
    <!-- Section 3 -->
    <section id="section-3">
        <div class="p-[50px] mb-[50px]">
            <div class="bg-[#bb1a14] flex justify-center items-center">
                <a
                    class="text-white text-sm py-6 font-bold tracking-widest"
                    href="{{link_cta}}"
                    >{{label_cta}}</a
                >
            </div>
        </div>
    </section>
</main>