Making the pillar more responsive to different screen sizes

Author: AJ-Kulundu

src/components/Pillar/Pillar.tsx

@@ -8,11 +8,11 @@ export default function Pillar({
   label: string;
 }) {
   return (
-    <div className="flex max-w-xs md:max-w-sm min-w-[50%] md:min-w-[30%]  space-x-4 p-4 border rounded-lg items-center bg-white md:bg-[#09AFC6]">
+    <div className="flex max-w-xs md:max-w-sm min-w-[70%] md:min-w-[40%] space-x-4 p-2 md:p-4 lg:p-6 shadow-md md:shadow-none rounded-lg items-center bg-white md:bg-[#09AFC6]">
       <p className="text-2xl md:text-4xl font-extrabold md:text-white tracking-wide">
         {count}
       </p>
-      <p className=" truncate text-md md:text-xl capitalize md:text-white tracking-wide">
+      <p className=" truncate text-lg md:text-3xl capitalize md:text-white tracking-wide">
         {label}
       </p>
     </div>