@layer base {
    /* Navbar Mobile Responsiveness */
    @media (max-width: 768px) {
      .navbar-container {
        @apply flex-col items-center relative;
      }
  
      .nav-links {
        @apply hidden flex-col w-full text-center absolute top-full left-0 bg-white/20 backdrop-blur-md z-50;
      }
  
      .nav-links.mobile-active {
        @apply block;
      }
  
      .nav-links a {
        @apply block py-3 border-b border-gray-200;
      }
  
      .mobile-toggle {
        @apply block cursor-pointer absolute right-4 top-4;
      }
  
      .mobile-toggle div {
        @apply w-6 h-0.5 bg-white my-1.5 transition-all;
      }
    }
  
    /* Grid Responsiveness */
    #our-work .grid {
      @apply grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4;
    }
  
    #our-work .grid > * {
      @apply col-span-full md:col-span-3 lg:col-span-2;
    }
  }