@layer components {
  .header {
    @apply h-15 sm:h-auto flex justify-between content-center font-mono font-extrabold tracking-wider relative;

    .brand {
      @apply flex items-center text-[18px] sm:text-[20px] tracking-tighter cursor-pointer gap-3;

      .logo {
        @apply h-full font-serif font-extrabold bg-ground-primary hover:bg-ground-primary-dark dark:bg-ground-primary-dark dark:hover:bg-ground-primary transform duration-150 text-ground-primary-text px-1 py-2 rounded-lg hover:shadow-lg;
      }
      .title {
        @apply hidden sm:inline text-ground/75 dark:text-ground-text/75;
      }
    }

    .content {
      @apply flex sm:flex-row-reverse gap-6;
    }
  }
}