{% if courses.enrolled.any? %}
  <div class="recent-container">
      {% for course in courses.enrolled %}
        {% if course.id == current_person.properties.last_viewed_course %}
          <p class="recent-view-header">RECENTLY VIEWED</p>
          {% include "cards_course" with course, class: "" %}
        {% endif %}
      {% endfor %}
  </div>
{% endif %}

<style>
  .recent-container {
    display: flex;
    align-items: center;

    flex-direction: column;
  }

  .recent-container>div>div {
    padding: 0px !important;
  }

  .recent-container>div>div>div {
    box-shadow: 4px 4px 0px rgba(128, 173, 220, 0.32);
    border-radius: 8px;
  }

  .recent-view-header {
    width: 100%;

  }
  
  @media (max-width: 768px) {
    .recent-view-header {
      margin-bottom: 0;
      background-color: #ebf5ff;
      padding: 5px 114px 0px;
      box-shadow: 4px 1px 0px rgb(128 173 220 / 32%);
      border-radius: 14px 14px 0 0;
    }
  }

  @media (min-width: 1025px) {
    .recent-view-header {
      margin-bottom: 0;
      background-color: #ebf5ff;
      box-shadow: 4px 1px 0px rgb(128 173 220 / 32%);
      border-radius: 14px 14px 0 0;
    }
  }
</style>