Footer

ds-ml-css/components/footer.scss

+/* Footer */
+
+footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-wrap: wrap;
+  background-color: var(--ml-footer-background-color);
+  gap: 20px 40px;
+  padding: 12px;
+  a {
+    font-size: var(--ml-small-font-size);
+    color: var(--ml-footer-links-color);
+    text-decoration: none;
+  }
+
+  @media (max-width: 480px) {
+    //@media #{$phone} {
+    flex-direction: column;
+  }
+}

ds-ml-css/ds-ml-color-var.scss

@@ -110,6 +110,10 @@
   --border-active-color: var(--ml-n950);
   /* BORDER CHECKBOX */
   --border-checkbox: var(--ml-m900);
+
+  /* FOOTER BACKGROUND */
+  --ml-footer-background-color: var(--ml-n950);
+  --ml-footer-links-color:var(--ml-n000);
 }
 
 *[dark] {
@@ -244,4 +248,8 @@
   --border-active-color: var(--ml-n150);
   /* BORDER CHECKBOX */
   --border-checkbox: var(--ml-n950);
+
+  /* FOOTER BACKGROUND */
+  --ml-footer-background-color: var(--ml-n000);
+  --ml-footer-links-color:var(--ml-n950);
 }

ds-ml-css/ds-ml.scss

@@ -8,6 +8,7 @@
 @use 'components/button.scss';
 @use 'components/input.scss';
 @use 'components/radio-button-checkbox.scss';
+@use 'components/footer.scss';
 
 :root {
   /* define fonts */