Fix styles for responsive footer

styles/components/branding.css

@@ -25,4 +25,15 @@
   &.is-hidden {
     opacity: 0;
   }
+
+  @media (--until-sm) {
+    &--footer {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  @media (--until-xl) {
+    margin: 15px 0 0;
+  }
 }

styles/components/footerend.css

@@ -11,20 +11,25 @@
     color: var(--color-gray-normal);
   }
 
-  & .footer-social {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+  @media (--until-sm) {
+    flex-direction: column;
     align-items: center;
-
-    & .footer-social-label {
-      margin: 0 10px 0 0;
-    }
+    margin: 20px 0 0;
   }
-
 }
 
 .footer-end-left {
   flex-direction: column;
   align-items: flex-start;
-}
+}
+
+.footer-social {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+
+  &__label {
+    margin: 0 10px 0 0;
+  }
+}