---
const { title, route } = Astro.props;
---

<a
  href={route}
  class="group flex flex-col items-center p-3 bg-navbar-color w-full rounded-3xl md:flex-row md:bg-none md:rounded-none"
>
  <div class="p-2">
    <slot />
  </div>
  <div
    class="font-roboto text-center font-bold text-text-color roboto transition duration-500 group-hover:text-text-hover-color md:text-xl md:pl-2 text-nowrap"
  >
    {title}
  </div>
</a>
