<div class="filter np-hidden col-12 col-md-3 col-lg-2" id="filter">
  <div class="filter-item-all filter-item-active">
    All
  </div>
  {% if courses_type == 'catalog' %}
    {% for cat in categories.in_catalog %}
      <div class="filter-item" filter-category="{{ cat.name | url_encode }}">
        {{ cat.name }}
      </div>
    {% endfor %}
  {% elsif courses_type == 'enrolled' %}
    {% for cat in categories.enrolled %}
      <div class="filter-item" filter-category="{{ cat.name | url_encode }}">
        {{ cat.name }}
      </div>
    {% endfor %}
  {% endif %}


</div>

<style>
  .filter {
    margin-bottom: 32px;
  }
  .filter-item-active {
    font-weight: 800;
  }
  .filter-item, .filter-item-all {
    cursor: pointer;
    padding: 8px 0;
    margin: 8px 0;
  }
  @media screen and (min-width: 768px) {
    .filter {
      border-right: 1px solid black;
      margin-bottom: 0;
    }
  } 
</style>