<!-- Instagram feed -->
<section class="container pt-5 mt-1 mt-sm-2 mt-md-3 mt-lg-4 mt-xl-5">
    <div class="text-center pt-xxl-3 pb-2 pb-md-3">
        <h2 class="pb-2 mb-1">
            <span class="animate-underline">
                <a class="animate-target text-dark-emphasis text-decoration-none" href="#!">#AsiaGolf</a>
            </span>
        </h2>
        <p>Find more inspiration on our Instagram</p>
    </div>
    <div class="overflow-x-auto pb-3 mb-n3" data-simplebar>
        <div class="d-flex gap-2 gap-md-3 gap-lg-4" style="min-width: 700px">
            <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                href="https://www.instagram.com/asiagolfindonesia/">
                <span
                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                <i
                    class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                <div class="hover-effect-target ratio ratio-1x1">
                    <img src="{{ asset('ig/627126351_868515585958098_5234946979031253180_n.jpg') }}" alt="Instagram image" class="object-fit-cover">
                </div>
            </a>
            <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                href="https://www.instagram.com/asiagolfindonesia/">
                <span
                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                <i
                    class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                <div class="hover-effect-target ratio ratio-1x1">
                    <img src="{{ asset('ig/607467049_3991986004432775_3154614208824352862_n.jpg') }}" alt="Instagram image" class="object-fit-cover">
                </div>
            </a>
            <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                href="https://www.instagram.com/asiagolfindonesia/">
                <span
                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                <i
                    class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                <div class="hover-effect-target ratio ratio-1x1">
                    <img src="{{ asset('ig/637072850_18450267685100713_2841227512989064742_n.jpg') }}" alt="Instagram image" class="object-fit-cover">
                </div>
            </a>
            <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                href="https://www.instagram.com/asiagolfindonesia/">
                <span
                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                <i
                    class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                <div class="hover-effect-target ratio ratio-1x1">
                    <img src="{{ asset('ig/637270426_18450238369100713_2695956505063029899_n.jpg') }}" alt="Instagram image" class="object-fit-cover">
                </div>
            </a>
            <a class="hover-effect-scale hover-effect-opacity position-relative w-100 overflow-hidden"
                href="https://www.instagram.com/asiagolfindonesia/">
                <span
                    class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
                <i
                    class="ci-instagram hover-effect-target fs-4 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
                <div class="hover-effect-target ratio ratio-1x1">
                    <img src="{{ asset('ig/639478537_1665736817945005_7744756753154487865_n.jpg') }}" alt="Instagram image" class="object-fit-cover">
                </div>
            </a>
        </div>
    </div>
</section>
