{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a class="np-card card-vertical np-card-new-styles video-card" href="{{course_path}}">
  <div class="np-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div class="img-wrapper">
        <img class="np-card-image" alt="{{ course.name }}" src="{{ course.image_url }}">
        <i class="fas fa-play"></i>
    </div>
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-short-description">
        {{ course.short_description }}
      </div>
      <div class="np-card-content-footer">
        {% if course.properties.course_length != "none" %}
          <div class="course-length">{{course.properties.course_length}}</div>
        {% endif %}
      </div>
    </div>
  </div>
</a>
