Extract card element

styles/atat.scss

@@ -22,6 +22,7 @@
 @import "elements/kpi";
 @import "elements/graphs";
 @import "elements/menu";
+@import "elements/card";
 
 @import "components/accordion_table";
 @import "components/topbar";

styles/elements/_card.scss

@@ -0,0 +1,34 @@
+.card {
+  width: 100%;
+  box-shadow: $box-shadow-big;
+  padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
+  margin-bottom: 20px;
+
+  .card__status {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-around;
+
+    .card__status-spacer {
+      flex-grow: 10;
+    }
+  }
+
+  .card__header h3 {
+    margin-top: 0;
+  }
+
+  .card__body {
+    font-size: $small-font-size;
+  }
+}
+
+.card {
+  .label {
+    margin-left: 0;
+  }
+
+  .datetime {
+    font-size: $small-font-size;
+  }
+}

styles/sections/_task_order.scss

@@ -585,40 +585,3 @@
     }
   }
 }
-
-.card {
-  width: 100%;
-  box-shadow: $box-shadow-big;
-  padding: ($gap * 2) ($gap * 2.5) ($gap * 4) ($gap * 3);
-  margin-bottom: 20px;
-
-  .card__status {
-    margin-bottom: $gap * 2;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-around;
-
-    .card__status-spacer {
-      flex-grow: 10;
-    }
-  }
-
-  .card__header {
-
-  }
-
-  .card__body {
-    font-size: $small-font-size;
-    color: $color-gray-medium;
-  }
-}
-
-.card {
-  .label {
-    margin-left: 0;
-  }
-
-  .datetime {
-    font-size: $small-font-size;
-  }
-}