@layer components {

  .btn-primary {
    @apply inline-flex items-center gap-4
    px-8 py-4
    rounded-full
    bg-brand-secondary
    text-white
    font-semibold
    text-base
    transition-all
    duration-300
    ease-out
    hover:-translate-y-[1px]
    hover:shadow-md
    hover:brightness-95;
  }

  .btn-primary-icon {
    @apply flex items-center justify-center
    w-10 h-10
    rounded-full
    bg-brand-primary
    text-white
    text-sm;
  }

}