Updated Pipedrive's templates, mostly.

Custom_Templates/customer_templates/Pipedrive - UserLearn/_homepage_recommended.html.liquid

@@ -0,0 +1,63 @@
+<div class="courses container width-limit">
+  <section class="courses-section">
+    <h3 class="courses-title strong">
+      <span class="lang-en">Don’t know where to start? We recommend these</span>
+      <span class="lang-de">Sie wissen nicht, wo Sie anfangen sollen? Wir empfehlen</span>
+      <span class="lang-es">¿No sabe por dónde empezar? Le recomendamos</span>
+      <span class="lang-fr">Vous ne savez pas par où commencer ? Voici nos recommandations.</span>
+      <span class="lang-br">Não sabe por onde começar? Recomendamos estes</span>
+    </h3>
+    {% assign any_course = false %}
+    <div class="courses-list row">
+      {% for course in courses.in_catalog %}
+        {% if course.properties.recommended_for_new_learner %}
+          {% assign any_course = true %}
+          {% if course.ribbon == 'VIDEO' %}
+            {% include 'cards_video' %}
+          {% else %}
+            {% include 'cards_course' %}
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </section>
+</div>
+
+{% unless any_course %}
+  <style>
+    .courses {
+      display: none;
+    }
+  </style>
+{% endunless %}
+
+<style>
+  .courses-title {
+    padding-bottom: 40px;
+    padding-top: 40px;
+  }
+  
+  @media only screen and (min-width: 768px) {
+    .courses {
+      padding-top: 40px;
+    }
+    .courses-list > div {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+    .courses-list .video-card .course-card-content {
+      margin-top: 31.6px;
+    }
+    .courses .course-card {
+      padding-bottom: 0;
+    }
+  }
+</style>
+
+<script>
+  window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.course-card-description').forEach((x) => {
+      $clamp(x, {clamp: 5});
+    })
+  })
+</script>