Tweak header and card grid

src/components/UI/card/Card.css

@@ -6,6 +6,7 @@
   border: 1px solid #f7f8f8;
   transition: all .1s ease-in-out;
   transform: translateY(0);
+  padding: 16px 24px;
 }
 
 .card:hover {
@@ -13,7 +14,7 @@
   transform: translateY(-8px);
 }
 
-.card > *:not(iframe, video, img, header, footer) {
+/*.card > *:not(iframe, video, img, header, footer) {
   margin-right: 10px;
   margin-left: 10px;
 }
@@ -24,20 +25,21 @@
 
 .card > *:not(iframe, video, img, header, footer):last-child {
   margin-bottom: 10px;
-}
+}*/
 
 .card > iframe,
 .card > video,
 .card > img {
-  max-width: 100%;
+  margin: -16px -24px 16px -24px;
+  width: calc(100% + 16px + 16px);
 }
 
 .card h1 {
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 600;
   letter-spacing: 0;
   line-height: 24px;
-  margin: 15px 0;
+  margin: 0;
   padding: 0;
   border: none;
   color: var(--defaultColor);
@@ -49,6 +51,5 @@
   letter-spacing: 0;
   line-height: 24px;
   padding: 0;
-  color: var(--defaultColor);
-  opacity: .5;
+  color: #8c8c8c;
 }

src/components/UI/theme.css

@@ -14,7 +14,7 @@
   --dropShadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
-  --backgroundAltColor: #191919;
+  --backgroundAltColor: #f8f9fa;
   --textFieldBorderColor: #e7e7e7;
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;