fix: course overlay site

lms/public/css/style.css

@@ -301,11 +301,11 @@ input[type=checkbox] {
 }
 
 .course-card-wide-title {
-  font-weight: bold;
-  font-size: var(--text-3xl);
+  font-weight: 700;
+  font-size: var(--text-4xl);
   line-height: 44px;
   color: var(--gray-900);
-  margin: 0.25rem 0;
+  margin: 0.5rem 0;
 }
 
 .button {
@@ -1193,7 +1193,6 @@ pre {
   padding: 1.25rem;
   font-size: var(--text-base);
   color: var(--text-color);
-  text-align: center;
 }
 
 .breadcrumb-destination {
@@ -1253,6 +1252,12 @@ pre {
   width: 75%;
 }
 
+@media (max-width: 1250px) {
+  .reviews-header {
+    width: 85%;
+  }
+}
+
 @media (max-width: 768px) {
   .reviews-header {
     width: 100%;
@@ -1432,3 +1437,10 @@ li {
     line-height: 1.7;
 }
 
+.course-overlay-title {
+    font-weight: 700;
+    font-size: var(--text-2xl);
+    line-height: 1rem;
+    color: var(--gray-900);
+    margin-bottom: 1.25rem;
+}

lms/www/courses/course.html

@@ -97,7 +97,7 @@
   {% endif %}
 
   <div class="course-overlay-content">
-    <div class="course-card-wide-title mb-4"> {{ course.title }} </div>
+    <div class="course-overlay-title"> {{ course.title }} </div>
 
     <div id="interest-alert" class="{% if not is_user_interested %} hide {% endif %}">
         {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }}
@@ -132,25 +132,22 @@
     </div>
     {% endif %}
 
-    <div class="vertically-center justify-content-center mb-2">
-      <div class="">
+    <div class="mb-3">
         <svg class="icon icon-md mr-1">
           <use class="" href="#icon-users">
         </svg>
         {{ get_students(course.name) | length }} {{ _("Enrolled") }}
-      </div>
+    </div>
 
-      <span class="seperator"></span>
 
-      {% if get_lessons(course.name) | length %}
-      <div class="">
+    {% if get_lessons(course.name) | length %}
+    <div class="mb-3">
         <svg class="icon icon-md mr-1">
-          <use href="#icon-education"></use>
+            <use href="#icon-education"></use>
         </svg>
         {{ get_lessons(course.name) | length }} {{ _("Lessons") }}
-      </div>
-      {% endif %}
     </div>
+    {% endif %}
 
     {% if course.paid_certificate %}
     <div class="certificate-price" data-price="{{ course.price_certificate }}">