chore: improve footer

The "Mentions légales" link was not enough visible on small viewports
because of the back to top link. So I change the disposition to improve
that.

2 files changed, 19 insertions, 18 deletions

diff --git a/src/components/FooterNav/FooterNav.module.scss b/src/components/FooterNav/FooterNav.module.scss
index af72df0..73ea568 100644
--- a/src/components/FooterNav/FooterNav.module.scss
+++ b/src/components/FooterNav/FooterNav.module.scss
@@ -1,17 +1,20 @@
+@use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
-.wrapper {
-  font-size: var(--font-size-sm);
-}
-
 .list {
   @extend %flex-list;
+
   gap: var(--spacing-xs);
+  place-content: center;
 }
 
 .item {
-  &::before {
-    content: "\2022";
-    margin-right: var(--spacing-xs);
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      &::before {
+        content: "\2022";
+        margin-right: var(--spacing-xs);
+      }
+    }
   }
 }
diff --git a/src/components/FooterNav/FooterNav.tsx b/src/components/FooterNav/FooterNav.tsx
index f1fd0b7..7167b69 100644
--- a/src/components/FooterNav/FooterNav.tsx
+++ b/src/components/FooterNav/FooterNav.tsx
@@ -28,17 +28,15 @@ const FooterNav = () => {
   });
 
   return (
-    <div className={styles.wrapper}>
-      <nav
-        className={styles.nav}
-        aria-label={intl.formatMessage({
-          defaultMessage: 'Footer',
-          description: 'FooterNav: aria-label',
-        })}
-      >
-        <ul className={styles.list}>{navItems}</ul>
-      </nav>
-    </div>
+    <nav
+      className={styles.nav}
+      aria-label={intl.formatMessage({
+        defaultMessage: 'Footer',
+        description: 'FooterNav: aria-label',
+      })}
+    >
+      <ul className={styles.list}>{navItems}</ul>
+    </nav>
   );
 };