actually fix it ;)

apps/formbricks-com/components/shared/BestPracticeNavigation.tsx

@@ -1,12 +1,12 @@
 import {
+  BaseballIcon,
   CancelSubscriptionIcon,
+  CodeBookIcon,
   DogChaserIcon,
   FeedbackIcon,
   InterviewPromptIcon,
   OnboardingIcon,
   PMFIcon,
-  BaseballIcon,
-  CodeBookIcon,
 } from "@formbricks/ui";
 import clsx from "clsx";
 import Link from "next/link";
@@ -81,14 +81,14 @@ export default function BestPracticeNavigation() {
   ];
 
   return (
-    <div className="mx-auto grid grid-cols-1 gap-6 px-2 sm:grid-cols-3">
+    <div className="mx-auto grid grid-cols-1 gap-6 px-2 md:grid-cols-3">
       {BestPractices.map((bestPractice) => (
         <Link href={bestPractice.href} key={bestPractice.name}>
           <div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:bg-slate-800">
             <div
               className={clsx(
                 // base styles independent what type of button it is
-                "text-3xs absolute right-6 rounded-full px-3 py-1",
+                "absolute right-6 rounded-full px-3 py-1 text-xs lg:text-sm",
                 // different styles depending on type
                 bestPractice.category === "Boost Retention" &&
                   "bg-pink-100 text-pink-500 dark:bg-pink-800 dark:text-pink-200",

apps/formbricks-com/tailwind.config.ts

@@ -20,7 +20,6 @@ export default {
   darkMode: "class",
   theme: {
     fontSize: {
-      "3xs": ["0.65rem", { lineHeight: "1.25rem" }],
       "2xs": ["0.75rem", { lineHeight: "1.25rem" }],
       xs: ["0.75rem", { lineHeight: "1rem" }],
       sm: ["0.875rem", { lineHeight: "1.5rem" }],