Issue #3217673 by agami4: Improve mediainfo content on the hero banner on the sky theme

assets/css/hero--sky.css

@@ -282,9 +282,32 @@
 }
 
 .socialblue--sky .hero__banner--static .metainfo__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: -3px;
+  margin-right: -3px;
   line-height: 2;
 }
 
+.socialblue--sky .hero__banner--static .metainfo__content > * {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+
+.socialblue--sky .hero__banner--static .metainfo__content > div:not([class]),
+.socialblue--sky .hero__banner--static .metainfo__content > div:last-child {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 100%;
+          flex: 0 0 100%;
+  max-width: 100%;
+}
+
 .socialblue--sky .hero__banner--static .metainfo__content a {
   text-decoration: none;
 }

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

@@ -340,8 +340,24 @@
     }
 
     .metainfo__content {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-left: -3px;
+      margin-right: -3px;
       line-height: 2;
 
+      > * {
+        padding-left: 3px;
+        padding-right: 3px;
+      }
+
+      > div:not([class]),
+      > div:last-child {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+
       a {
         text-decoration: none;