Improve navbar responsivity

source/css/organisms/navbar.pcss

@@ -45,14 +45,6 @@
 
 .navbar-menu__link {
   @apply text-xl font-condensed uppercase leading-loose;
-
-  @screen lg {
-    @apply text-lg;
-  }
-
-  @screen xl {
-    @apply text-xl;
-  }
 }
 
 .navbar-menu__submenu .navbar-menu__link {
@@ -76,7 +68,6 @@
   }
 }
 
-
 @screen lg {
   .navbar {
     @apply py-4;
@@ -96,15 +87,26 @@
     @apply inline-block;
 
     &:not(:first-child) {
-      @apply ml-3;
+      @apply ml-2;
     }
   }
 
   .navbar-menu__link {
-    @apply leading-normal
+    @apply text-lg leading-normal;
   }
 
   .navbar-menu__submenu-toggle:after {
     @apply ml-1;
   }
 }
+
+
+@screen 2xl {
+  .navbar-menu__item:not(:first-child) {
+    @apply ml-3;
+  }
+
+  .navbar-menu__link {
+    @apply text-xl;
+  }
+}

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
       'md': '768px',
       'lg': '992px',
       'xl': '1200px',
+      '2xl': '1366px',
     },
     fontFamily: {
       alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],