Issue #3217673 by agami4: Improve mediainfo content on the hero banner on the sky theme(1st)

assets/css/hero--sky.css

@@ -290,14 +290,22 @@
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-left: -3px;
-  margin-right: -3px;
+  margin-left: -5px;
+  margin-right: -5px;
   line-height: 2;
 }
 
+.socialblue--sky .hero__banner--static .metainfo__content a {
+  text-decoration: none;
+}
+
+.socialblue--sky .hero__banner--static .metainfo__content a:hover {
+  text-decoration: underline;
+}
+
 .socialblue--sky .hero__banner--static .metainfo__content > * {
-  padding-left: 3px;
-  padding-right: 3px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .socialblue--sky .hero__banner--static .metainfo__content > div:not([class]),
@@ -308,18 +316,9 @@
   max-width: 100%;
 }
 
-.socialblue--sky .hero__banner--static .metainfo__content a {
-  text-decoration: none;
-}
-
-.socialblue--sky .hero__banner--static .metainfo__content a:hover {
-  text-decoration: underline;
-}
-
 .socialblue--sky .hero__banner--static .metainfo__content .badge--large {
   line-height: 1.2;
   margin-bottom: 0;
-  padding-left: 0;
 }
 
 .socialblue--sky .hero__banner--static .page-title {

components/04-organisms/hero/hero--sky.scss

@@ -343,13 +343,21 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      margin-left: -3px;
-      margin-right: -3px;
+      margin-left: -5px;
+      margin-right: -5px;
       line-height: 2;
 
+      a {
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
       > * {
-        padding-left: 3px;
-        padding-right: 3px;
+        padding-left: 5px;
+        padding-right: 5px;
       }
 
       > div:not([class]),
@@ -358,18 +366,9 @@
         max-width: 100%;
       }
 
-      a {
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
       .badge--large {
         line-height: 1.2;
         margin-bottom: 0;
-        padding-left: 0;
       }
     }