<div class="np-dashboard-resources" style="padding-bottom: 1rem;">
  <div class="np-card">
  <div class="np-card-container">
    <div class="np-card-content-training-event">
          <h3 class="np-card-content-title recent-achievements">
            Recent Achievements
          </h3>
          <div style="    float: left;">
            <button class="view-achievements-button" onclick="#" type="button">Total Points:{{ current_person.properties.learner_points }}</button>
          </div>
    </div>
    
<br>
    
<br>
    <div class="achivements-carousel">
    {% for course in courses.enrolled %}
      {% if course.progress == 100 %}
      <div>
      <br>
        <img src="{{course.properties.course_badge}}">
        <div class="np-card-content-title recent-achievements col-12" style="text-align: center;">
            <p>{{ course.name }}</p>
        </div>
      </div>
      {% endif %}
    {% endfor %}
    </div>
  </div>
  </div>
</div>

<style>
  .view-achievements-button {
    background-color: #DC3713;
    border: none;
    color: white;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    border-radius: 30px;
    margin-top:12px;
   
  }

  .recent-achievements {
    font-size: 16px;
  }

  .achievement-icon {
    text-align: center;
    color: #bec2c6;;
  }

  .horizontal-separator {
    border-bottom: 1px solid grey;
  }

  @media screen and (max-width: 1200px) {
    .recent-achievements {
        font-size: 12px;
    }

  }

  @media screen and (max-width: 800px) {
    .view-achievements-button {
      font-size: 9px;
    }
  }


  </style>
