refactor: styling cards and article
diff --git a/erpnext/www/lms/macros/card.html b/erpnext/www/lms/macros/card.html
index f77b514..f227355 100644
--- a/erpnext/www/lms/macros/card.html
+++ b/erpnext/www/lms/macros/card.html
@@ -1,5 +1,5 @@
 {% macro program_card(program, has_access) %}
-<div class="col-sm mb-4 text-left">
+<div class="col-sm-4 mb-4 text-left">
 	<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if program.hero_image %}
@@ -11,7 +11,7 @@
 		{% endif %}
 		<div class='card-body'>
 			<h5 class='card-title'>{{ program.program_name }}</h5>
-			<div class="text-muted">{{ program.description or '' }}</div>
+			<div class="text-muted">{{ program.description[:110] + '...' if program.description else '' }}</div>
 		</div>
 		{% if has_access or program.intro_video%}
 		<div class='card-footer'>
@@ -23,4 +23,12 @@
 	</div>
 	</a>
 </div>
+{% endmacro %}
+
+
+{% macro null_card() %}
+<div class="col-sm-4 mb-4 text-left">
+	<div class="h-100" style="border: 1px solid rgba(209,216,221,0.5);border-radius: 0.25rem;background-color: rgb(250, 251, 252);">
+	</div>
+</div>
 {% endmacro %}
\ No newline at end of file