@layer components {
  #mobile-menu {
    /* min-height: calc(100vh - 6rem); */
    @apply w-full overflow-hidden bg-negative dark:bg-negative-dark text-negative-text dark:text-negative-dark-text;
    opacity: 0;
    height: 0vh;
    transition: opacity ease-in-out 0.3s, height ease-in-out 0.2s;
  }
  #mobile-menu li {
    @apply px-10 py-4 block;
  }
  #mobile-menu a {
    @apply inline-block p-6;
  }
  #mobile-menu.engaged {
    opacity: 100%;
    height: 83svh;
  }
}