<section class="instagram py-120 overflow-hidden">
    <div class="container container-lg">
        <div class="section-heading">
            <div class="flex-between flex-wrap gap-8">
                <div class="">
                    <h5 class="mb-0 text-uppercase">Instagram</h5>
                    <p class="text-gray-500">Get inspired by Carina fans from all around the world</p>
                </div>
                <div class="flex items-center gap-16"><a href="shop.html"
                                                         class="text-sm font-[600] text-gray-700 hover-text-main-600 hover-text-decoration-underline">View
                        All</a>
                    <div class="flex items-center gap-8"><button type="button" id="instagram-prev"
                                                                 class="slick-prev slick-arrow flex items-center justify-center rounded-[50%] border border-gray-100 hover-border-main-600 text-xl hover-bg-main-600 hover-text-white transition-1"><i
                                class="ph ph-caret-left"></i></button> <button type="button" id="instagram-next"
                                                                               class="slick-next slick-arrow flex items-center justify-center rounded-[50%] border border-gray-100 hover-border-main-600 text-xl hover-bg-main-600 hover-text-white transition-1"><i
                                class="ph ph-caret-right"></i></button></div>
                </div>
            </div>
        </div>
        <div class="instagram-slider">
            <div data-aos="fade-up" data-aos-duration="400">
                <div class="instagram-item rounded-24 overflow-hidden relative"><img
                        src="views/assets/images/instagram-img1.png" alt="Image"> <a
                        href="https://www.instagram.com"
                        class="w-72 h-72 bg-black bg-opacity-50 text-white text-32 absolute top-[50%] left-[50%] translate-middle flex items-center justify-center rounded-[50%] hover-bg-main-two-600 hover-text-white"><i
                            class="ph ph-instagram-logo"></i></a></div>
            </div>
            <div data-aos="fade-up" data-aos-duration="600">
                <div class="instagram-item rounded-24 overflow-hidden relative"><img
                        src="views/assets/images/instagram-img2.png" alt="Image"> <a
                        href="https://www.instagram.com"
                        class="w-72 h-72 bg-black bg-opacity-50 text-white text-32 absolute top-[50%] left-[50%] translate-middle flex items-center justify-center rounded-[50%] hover-bg-main-two-600 hover-text-white"><i
                            class="ph ph-instagram-logo"></i></a></div>
            </div>
            <div data-aos="fade-up" data-aos-duration="800">
                <div class="instagram-item rounded-24 overflow-hidden relative"><img
                        src="views/assets/images/instagram-img3.png" alt="Image"> <a
                        href="https://www.instagram.com"
                        class="w-72 h-72 bg-black bg-opacity-50 text-white text-32 absolute top-[50%] left-[50%] translate-middle flex items-center justify-center rounded-[50%] hover-bg-main-two-600 hover-text-white"><i
                            class="ph ph-instagram-logo"></i></a></div>
            </div>
            <div data-aos="fade-up" data-aos-duration="1000">
                <div class="instagram-item rounded-24 overflow-hidden relative"><img
                        src="views/assets/images/instagram-img4.png" alt="Image"> <a
                        href="https://www.instagram.com"
                        class="w-72 h-72 bg-black bg-opacity-50 text-white text-32 absolute top-[50%] left-[50%] translate-middle flex items-center justify-center rounded-[50%] hover-bg-main-two-600 hover-text-white"><i
                            class="ph ph-instagram-logo"></i></a></div>
            </div>
            <div data-aos="fade-up" data-aos-duration="1200">
                <div class="instagram-item rounded-24 overflow-hidden relative"><img
                        src="views/assets/images/instagram-img2.png" alt="Image"> <a
                        href="https://www.instagram.com"
                        class="w-72 h-72 bg-black bg-opacity-50 text-white text-32 absolute top-[50%] left-[50%] translate-middle flex items-center justify-center rounded-[50%] hover-bg-main-two-600 hover-text-white"><i
                            class="ph ph-instagram-logo"></i></a></div>
            </div>
        </div>
    </div>
</section>
