{% assign activities_count = 0 %}
{% for course_section in course.sections %}
  {% for course_activity in course_section.activities %}
    {% assign activities_count = activities_count | plus: 1 %}
  {% endfor %}
{% endfor %} 
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div class="np-card">
  <div class="np-card-container">
    <a href="{{ course_path }}">
      <img
        class="np-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    </a>
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <a class="np-card-content-title" href="{{ course_path }}">
        {{ course.name }}
      </a>
      <div class="np-card-content-subtitle">
        {{ course.full_description }}
      </div>
      <div class="np-card-content-lessons">
        {{ activities_count }} {% if activities_count == 1 %}Lesson{% else %}Lessons{% endif %}
      </div>
    </div>
  </div>
</div>

<style>
  .np-card {
    padding: 25px 30px !important;
  }
  .np-card-content {
    padding: 10px 50px 40px;
  }
  .np-card-content-title {
    color: rgb(38, 49, 61);
    font-size: 28px;
    font-weight: 800;
    text-decoration: none;
    height: 65px;
    overflow: clip;
  }
  .np-card-content-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: rgba(0,0,0,.75);
    height: 100px;
    margin-top: 10px;

  }
  .np-card-content-lessons {
    color: rgb(38, 49, 61);
    font-weight: 800;
    font-size: 21px;
    margin-top: 20px;
    line-height: 26px;
  }
  .np-card-content-footer {
    margin-top: 40px;
  }
  .np-button {
    height: 53px;
    border-radius: 100px;
    padding: 12px 45px;
  }
  .np-card-content-progress {
    font-size: 18px;
    margin: auto 0;
  }
</style>