<div class="np-homepage-featured np-homepage-featured-items np-max-width">
    <div class="np-homepage-featured-text">
    <div class="np-homepage-headline">
    Recommended Gear
    </div>
</div>

<div class="featured-photography-carousel np-carousel np-carousel-bg-blue" id="featured-photography-carousel">
    <div class="np-carousel-card">
        <div>
            <img src=https://5prq858zcb-flywheel.netdna-ssl.com/wp-content/uploads/2016/12/50823_4WhiteBG-1-600x625.png" alt="Featured Photography" class='customer-carousel-image'/>
        <div class="slide-label">Misty Mountain Cadillav Harness</div>
    </div>
    
    </div>
    <div class="np-carousel-card">
    <div>
            <img src="https://outdoorgearlab-mvnab3pwrvp3t0.stackpathdns.com/photos/18/97/311203_1848_XXXL.jpg" alt="Featured Photography" class='customer-carousel-image'/>
        <div class="slide-label">Gri-Gri Belay Device</div>
    </div>
    
    </div>
    <div class="np-carousel-card">
        <div>
            <img src="https://lcdn.sportiva.com/pub/media/catalog/product/8/0/800_yellow_katanalace_1_7_4.jpg" alt="Featured Photography" class='customer-carousel-image'/>
            <div class="slide-label">La Sportiva Katana Lace Shoes</div>
        </div>       
    </div>
    <div class="np-carousel-card">
    <div>
            <img src="https://s3.amazonaws.com/static.northpass.com/demos/hsbc-old-logo.png" alt="Featured Photography" class='customer-carousel-image'/>
        <div class="slide-label">Metolious Helmet</div>
    </div>

    </div>
    <div class="np-carousel-card">
    <div>
            <img src="https://s3.amazonaws.com/static.northpass.com/demos/sandia-labs-logo.jpg" alt="Featured Photography" class='customer-carousel-image'/>
        <div class="slide-label">Unknown</div>
    </div>
    
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){

        $("#featured-photography-carousel").slick({
            slidesToShow: 3.5,
            prevArrow: '<i class="fal fa-chevron-left"></i>',
            nextArrow: '<i class="fal fa-chevron-right"></i>',
            infinite: false,
            responsive: [
                {
                    breakpoint: 1350,
                    settings: {
                        slidesToShow: 2.3,
                    }
                },
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                    }
                }
            ]
        });
    });
	
</script>

<style>
.featured-photography-carousel .fa-chevron-right::before {
    right: -6px !important;
}
.customer-carousel-image {
    width: 292px;
    height: 292px;
    object-fit: contain;
}
.featured-photography-carousel .slick-initialized .slick-slide {
    margin: 10px 10px;
    }
</style>