update navbar layout

majak_uistyleguide/templates/patterns/organisms/layout/navbar.html

@@ -14,11 +14,11 @@
     {% endblock %}
   "
 >
-  <div class="container--wide py-3 xl:py-6 flex justify-between items-center">
+  <div class="container--wide py-3 2xl:py-6 flex justify-between items-center">
 
-    <div class="flex items-center xl:items-start">
+    <div class="flex items-center 2xl:items-start">
       <!-- BEGIN Logo-->
-      <a href="{{ logo_url }}" class="z-20 xl:mt-2 hover:no-underline">
+      <a href="{{ logo_url }}" class="z-20 2xl:mt-2 hover:no-underline">
         {% block navbar_logo_images %}
           <img class="navbar__logo--white w-[150px] lg:w-[180px]" src="{{ white_logo_image_url }}" alt="">
           <img class="navbar__logo--black w-[150px] lg:w-[180px]" src="{{ black_logo_image_url }}" alt="">
@@ -27,7 +27,7 @@
       <!-- END Logo -->
     </div>
 
-    <div class="flex-col gap-3 xl:flex hidden">
+    <div class="flex-col gap-3 2xl:flex hidden">
 
       <!-- BEGIN Social media-->
       <div class="flex gap-7 justify-end items-center">
@@ -110,7 +110,7 @@
 
                       hover:no-underline
 
-                      xl:w-auto
+                      2xl:w-auto
                     "
 
                     {% if menu_button_url %}href="{{ menu_button_url }}"{% endif %}
@@ -146,7 +146,7 @@
     <!-- Hamburger Icon -->
     <input class="hidden navbar__mobile-menu__toggle" type="checkbox" id="navbar__mobile-menu__toggle">
 
-    <label class="z-30 hamb text-black xl:hidden" for="navbar__mobile-menu__toggle">
+    <label class="z-30 hamb text-black 2xl:hidden" for="navbar__mobile-menu__toggle">
       <span>
         <span class="bar1"></span>
         <span class="bar2"></span>
@@ -178,7 +178,7 @@
         class="
           flex flex-col gap-8 md:flex-row pt-6 px-8
           md:justify-between
-          xl:pl-32
+          2xl:pl-32
         "
       >
         <div class="flex flex-col gap-1.5 items-start">

src/css/organisms/navbar.pcss

@@ -152,7 +152,7 @@
 .navbar__mobile-menu__toggle:checked ~ .navbar__mobile-menu {
   @apply z-20 visible pointer-events-auto opacity-100;
 
-  @screen xl {
+  @screen 2xl {
     @apply z-0 invisible pointer-events-none opacity-0;
   }
 }