<div class="featured-section-container">
    <div class="featured-carousel">
    {% for course in courses.in_catalog %}
        {% if course.properties.featured_course %}
            {% include 'cards_course' %}
        {% endif %}
    {% endfor %}
    </div>
</div>

<script type="module">
    var slider = tns({
        container: '.featured-carousel',
        items: 1,
        slideBy: 'page',
        autoplay: false,
        controls: false,
        navPosition: 'bottom',
        autoplayButtonOutput: false,
        responsive: {
            768: {
                items: 2,
                gutter: 10
            },
            1024: {
                items: 3,
                gutter: 30
            }
        }
  });
  </script>
