<div class="catalog-category-carousels np-max-width">
    {% if categories.in_catalog.any? %}
      {% assign categories_by_name = categories.in_catalog | sort: "name" %}
      {% assign carousel_count = 1 %}
      {% for category in categories_by_name %}
        {% assign carousel_count = carousel_count | plus: 1 %}
        {% assign courses_per_carousel = 0 %}

        {% assign category_name_split = category.name | split: " " %}
        {% assign category_name_joined = category_name_split | join: "-" | downcase %}

        <div class="category-section" data-carousel="{{carousel_count}}" style="display:none;" id="{{ category_name_joined }}" data-filter='{{category.id}}'>
          <div class="carousel-header-wrapper">
            <h3 class="carousel-header">{{category.name}}</h3>
            <a href="#" class="show-more" data-toggle-carousel="{{carousel_count}}" data-carousel-state="initialized">Show More</a>
          </div>

          {% assign catalog_courses = courses.in_catalog %}
          {% if catalog_courses.any? %}
              {% for course in catalog_courses %}           
                {% for course_category in course.categories %}
                    {% if category.name == course_category.name %}
                      {% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
                    {% endif %}
                {% endfor %}
              {% endfor %}
          {% endif %}
          
          {% include "courses_carousel", category: category.name, num_of_slides: courses_per_carousel %}
        </div>
      {% endfor %}
    {% endif %}
  </div>

  <style>

    .catalog-category-carousels {
      padding: 0 24px;
    }

    .category-section {
      padding: 40px 0 16px;
      border-bottom:1px solid #ddd;
    }

    .category-section:last-child {
      border-bottom:none;
    }

    .carousel-header-wrapper {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .carousel-header-wrapper .carousel-header {
      margin:0;
    }

    .carousel-header-wrapper .show-more {
      margin-left:12px;
      border: 1px solid #0caa41;
      padding: 3px 16px;
      border-radius: 3px;
      font-size: 15px;
      font-weight: 700;
      line-height: 28px;
      color: #0caa41;
      text-decoration: none;
      white-space:nowrap;
      transition: color .2s ease-out 0s,background-color .2s ease-out 0s;
    }

    .carousel-header-wrapper .show-more:hover {
      border: 1px solid #0caa41;
      color: #fff;
      background-color: #0caa41;
    }

    .category-carousel .np-card {
      height: 100%;
      padding-bottom: 32px;
    }

    .category-carousel:not(.slick-initialized) {
      display:flex;
      flex-wrap:wrap;
    }

    @media (min-width:768px) {
      .catalog-category-carousels {
        padding: 0 64px;
      }

      .carousel-header-wrapper {
        justify-content: flex-start;
        margin-bottom:24px;
      }

      .carousel-header-wrapper .carousel-header {
        font-size:24px;
      }

      .category-carousel:not(.slick-initialized) > div {
        width:50%;
      }
    }

    @media (min-width:1200px) {

      .category-carousel:not(.slick-initialized) > div {
        width:33.33%;
      }
    }
  </style>