
{% if result.type == 'course' %}
<div data-fs-element="academy | search-result" data-fs-properties-schema='{"data-course-id":"str", "data-card-type":"str"}' data-card-type="course" data-course-id="{{ result.course.id }}" class="course-card-search col-xs-12 col-sm-6 col-lg-4 search-result">
  <a class="course-card-wrapper" href="{{ result.path }}">
    <img class="course-card-image" src="{{ result.image_url }}" >
    <div class="course-card-content">
      <h5 class="course-card-title result-name">
       {{ result.name }}
      </h5>
      <div class="course-card-description" style="overflow: hidden; text-overflow: ellipsis; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 5;">
       {{ result.sanitized_description }}
      </div>
      <div class="course-card-footer">
        <div class="course-card-button button-wrapper">
          <div class="button-2 button-medium">
            <span class="lang-en">See more</span>
            <span class="lang-de">Mehr anzeigen</span>
            <span class="lang-es">Ver más</span>
            <span class="lang-fr">Voir plus</span>
            <span class="lang-br">Ver mais</span>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>
{% comment %}
The styling below and the additional span is to make the entire div clickable as requested by the client.
{% endcomment %}
{% endif %}

<style>
.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.course-card-search  {
  padding: 20px;
}
</style>


