<div class="recommended-courses container width-limit">
  <h2 class="recommended-courses-title">
    <span class="lang-en">Courses you may find helpful</span>
    <span class="lang-de">Kurse, die Sie hilfreich finden könnten</span>
    <span class="lang-es">Cursos que pueden resultarle útiles</span>
    <span class="lang-fr">Cours qui pourraient vous être utiles</span>
    <span class="lang-br">Cursos que você pode achar útil</span>
  </h2>
  {% assign similar_count = 0 | plus: 0 %}
  {% assign categories_ids = course.categories | map: "id" %}
  <div class="recommended-courses-list row">
    {% for checked_course in courses.enrolled %}
      {% if checked_course.id != course.id and checked_course.ribbon != "VIDEO" %}
        {% for category in checked_course.categories %}
          {% if categories_ids contains category.id %}
            {% include 'cards_course' with checked_course as course %}
            {% assign similar_count = similar_count | plus: 1 %}
            {% break %}
          {% endif %}
        {% endfor %}
      {% endif %}
      {% if similar_count == 3 %} {% break %} {% endif %}
    {% endfor %}
  </div>
</div>
{% if similar_count == 0 %}
  <style>
    .recommended-courses {
        display: none;
    }
  </style>
{% endif %}
<style>
  .recommended-courses-title {
    padding-bottom: 40px;
    padding-top: 40px;
  }
  .recommended-courses-list {
    border-bottom: 1px solid #E1E1FF;
  }
  @media only screen and (min-width: 768px) {
    .recommended-courses-list > div {
      padding-left: 15px;
      padding-right: 15px;
    }
  }
</style>
