<section class="recommended-courses">
    <div class="text-wrapper">
        <div class="heading">Recommended Learning Paths</div>
        <div class="desc">Follow structured learning paths designed to take you from beginner to expert in your area</div>
    </div>
    <div class="np-max-width">
    <div class="courses-wrapper">
            {% for learning_path in learning_paths.enrolled %}
                    {% include 'cards_learning_path' %}
            {% endfor %}
        </div>
    </div>
</section>

<style>

    .recommended-courses .heading {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 20px;
        font-weight: 600;
        color: #000;
    }
    .recommended-courses .desc {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 40px;
        color: #555;
        max-width: 800px;
    }
    .courses-wrapper {
       display: grid;
       grid-template-columns: repeat(3,1fr);
        gap: 20px;
    }
</style>