tighter menu spacing on mobile to aligne logo and menu button

demo-components.php

@@ -1,5 +1,10 @@
 <?php get_header('demo-components'); ?>
 
+<div class="page-demo-component">
+
+
+	<!-- HOME -->
+
 	<section class="demo-components-home">
 		<h1>Content system & Design system | Documentation</h1>
 		<h2>Bienvenue dans la documentation Homegrade</h2>
@@ -676,6 +681,7 @@
 	</section>
 
 
+</div>
 
 <?php
 get_footer('demo-components');

resources/css/layout/menu-renovateur.css

@@ -7,12 +7,15 @@
    shadow-md 
    flex
    flex-wrap 
+   items-center
    justify-between;
 
   .website_logo {
     @apply order-1
-    mr-12 
-		w-[190px]
+    mr-2 
+    md:mr-12 
+		w-[140px]
+		md:w-[190px]
 		xl:w-[222px];
 
     a:focus img {
@@ -151,10 +154,10 @@
   }
 
   &__interaction_toggles {
-    @apply order-2 lg:order-3 flex items-center justify-start gap-4;
+    @apply order-2 lg:order-3 flex items-center justify-start gap-2 md:gap-4;
   }
   &__mobile-menu-toggle {
-    @apply lg:hidden flex items-center gap-4;
+    @apply lg:hidden flex items-center gap-4 px-4 md:px-8;
     .toggle-icon {
       /* transform: translate(0, 7px); */
       @apply w-6 h-4 relative opacity-80;