{% assign used_instructor_names = "" %}

<div class="instructors-carousel np-carousel" id="instructors-carousel">   
    <div class="np-carousel-card">
        <div class="instructor-slide">
            <div class="instructor-image" style='height:160px; width: 160px;'>
                <img class="instructor-image-border-radius" style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/132.png" />
            </div>
            <div class="instructor-info">
                <div class="instructor-name">Helena Li</div>
                <div class="instructor-joined">Customer Education Manager</div>
            </div>
        </div>
    </div>
    <div class="np-carousel-card">
        <div class="instructor-slide">
            <div class="instructor-image" style='height:160px; width: 160px;'>
                <img class="instructor-image-border-radius" style='height: 136px; width: 136px;' src="https://s3.amazonaws.com/static.northpass.com/Front+Academy/132(1).png"/>
            </div>
            <div class="instructor-info">
                <div class="instructor-name">Matthew Meeks</div>
                <div class="instructor-joined">Customer Education Manager</div>
            </div>
        </div>
    </div>
    
</div>

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

    $(".instructors-carousel").slick({
        slidesToShow: 2,
        prevArrow: '<i class="fal fa-chevron-left"></i>',
        nextArrow: '<i class="fal fa-chevron-right"></i>',
        infinite: false,
        dots: false,
        arrows: true,
        responsive: [
            {
                breakpoint: 1170,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    });
});
	
</script>

<style>
    .instructors-carousel .fa-chevron-right:before {
        right: -7px !important;
    }
    .instructor-slide {
        display: flex;

    }
    .instructor-image-border-radius {
        border-radius: 100%;
    }

    .instructor-name {
        font-weight: 600;
        font-size: 24px;
        line-height: 140%;
        color: #001B38;
    }

    .instructor-joined {
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
    }
</style>