<div class="recommended-wrapper">
    <div class="heading lang-en">
        Browse all learning paths
    </div>
    <div class="heading lang-de">
        Alle Lernpfade durchsuchen
    </div>
    <div class="heading lang-fr">
        Parcourir tous les parcours d’apprentissage
    </div>
    <div class="heading lang-jp">
        すべての学習プログラム
    </div>

    <div class="all-lp-wrapper">
        {% for learning_path in learning_paths.enrolled %}
            {% for category in learning_path.categories %}
                {% if category.name == userLanguage %}
                    <div class="carousel-card">
                        {% include "cards_learning_path" %}
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>

</div>

<style>
    .all-lp-wrapper {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
        margin-top: 30px;
    }
    .all-lp-carousel {
        position: relative;
    }
    .slick-arrow {
        position: absolute;
        top: -30px;
        z-index: 111;
        cursor: pointer;
    }
    .right-arrow {
        margin-left: 30px;
    }
    .slick-dots button {
        display: block;
        width: 10px;
        height: 10px;
        padding: 0;
        border: none;
        border-radius: 1px;
        background: #8878FF;
        text-indent: -9999px;
    }
    .slick-dots {
        list-style-type: none;
    }
    .slick-dots {
        display: flex;
        justify-content: center;
        margin: 0;
        padding-top: 3rem;
        list-style-type: none;
        gap: 10px;
    }
    .slick-dots li {
        margin: 0 0.25rem;
    }
    .slick-dots li.slick-active button {
        background: #6CF1C9;

    }
@media only screen and (max-width: 1170px) { 
    .all-lp-wrapper {
        grid-template-columns: repeat(2,1fr);
    }
}
@media only screen and (max-width: 768px) { 
    .all-lp-wrapper {
        grid-template-columns: repeat(1,1fr);
    }
}
</style>

