diff --git a/src/app/card-dashboard/card-dashboard.component.css b/src/app/card-dashboard/card-dashboard.component.css
index 9509c37..2395192 100644
--- a/src/app/card-dashboard/card-dashboard.component.css
+++ b/src/app/card-dashboard/card-dashboard.component.css
@@ -2,6 +2,10 @@
   margin: 40px;
 }
 
+.card-container.small {
+  margin: 20px;
+}
+
 .card-container.left.desktop {
   margin-right: 20px;
 }
@@ -17,3 +21,11 @@
 .card-container.right.mobile {
   margin-top: 20px;
 }
+
+.card-container.left.small {
+  margin-bottom: 10px;
+}
+
+.card-container.right.small {
+  margin-top: 10px;
+}
diff --git a/src/app/card-dashboard/card-dashboard.component.html b/src/app/card-dashboard/card-dashboard.component.html
index f2be81d..a6e8988 100644
--- a/src/app/card-dashboard/card-dashboard.component.html
+++ b/src/app/card-dashboard/card-dashboard.component.html
@@ -1,4 +1,5 @@
-<div class="card-container {{ matCardClass }}" ngClass.gt-sm="desktop" ngClass.lt-md="mobile">
+<div class="card-container {{ matCardClass }}" ngClass.gt-sm="desktop" ngClass.lt-md="mobile"
+     ngClass.xs="small">
 
   <mat-card>