<div class="np-homepage-featured np-homepage-featured-items np-max-width">
    <div class="np-homepage-featured-text">
    <div class="np-homepage-headline">
    Featured Customers
    </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://s3.amazonaws.com/static.northpass.com/demos/jpmorgan-chase-logo-2000.jpg" alt="Featured Photography" class='customer-carousel-image'/>
        <div class="slide-label">JP Morgan & Chase</div>
    </div>
    
    </div>
    <div class="np-carousel-card">
    <div>
            <img src="https://s3.amazonaws.com/static.northpass.com/demos/AON-logo.png" alt="Featured Photography" class='customer-carousel-image'/>
        <div class="slide-label">AON</div>
    </div>
    
    </div>
    <div class="np-carousel-card">
        <div>
            <img src="https://s3.amazonaws.com/static.northpass.com/demos/faurecia-vector-logo.png" alt="Featured Photography" class='customer-carousel-image'/>
            <div class="slide-label">Faurecia</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">HSBC</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">Sandia National Laboratories</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: 225px;
    height: 225px;
    object-fit: contain;
    align-content: center;
}
.slick-track .np-carousel-card {
    margin-right: -105px;
}

.featured-photography-carousel .slick-initialized .slick-slide {
    margin: 0 1px 1px 0;
    }
</style>