<div class="feature-learning-paths-container">
    <div class="text-container">
        <div class="text-heading">
            Grow With Walmart Learning Pathways
        </div>
    </div>

        <div class="feature-lp-carousel">
            {% for learning_path in learning_paths.available %}
                {% for category in learning_path.categories %}
                    {% if category.name == 'Featured' %}
                        <div class="feature-lp-carousel-card-container">
                            {% include 'feature_cards_lp' %}
                        </div>
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </div>
    </div>


<style>
    .feature-cards-container {
        display: flex;
    }
    .feature-lp-carousel-card-container {
        margin: 10px;
    }
    .feature-learning-paths-container {
        position: relative;
    }
</style>


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

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