fix: countdown on mobile

Author: tomquirk

src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeaderCountdown.tsx

@@ -30,12 +30,12 @@ export const ProjectHeaderCountdown: React.FC<ProjectHeaderCountdownProps> = ({
   return (
     <div
       className={twMerge(
-        'absolute bottom-5 left-1/2 mx-auto flex w-full max-w-6xl -translate-x-1/2 items-center justify-end pr-4 md:pr-5 xl:pr-0',
+        'absolute bottom-5 left-1/2 mx-auto flex w-full max-w-6xl -translate-x-1/2 flex-col items-end pr-2 sm:flex-row sm:items-center sm:justify-end sm:pr-4 md:pr-5 xl:pr-0',
         className,
       )}
     >
       <div className="mr-3 text-lg text-white">Closing in</div>
-      <div className="flex gap-3">
+      <div className="flex gap-1 sm:gap-3">
         <CountdownCard label="DAYS" unit={days} />
         <CountdownCard label="HRS" unit={hours} />
         <CountdownCard label="MINS" unit={minutes} />
@@ -52,8 +52,8 @@ export const CountdownCard = ({
   label: ReactNode
   unit: number
 }) => (
-  <div className="flex w-11 flex-1 flex-col items-center rounded-lg border border-smoke-75 bg-smoke-50 py-1 px-1.5 text-black drop-shadow dark:border-slate-400 dark:bg-slate-700 dark:text-white">
-    <div className="text-xl">{unit}</div>
+  <div className="flex w-11 flex-1 flex-col items-center rounded-lg border border-smoke-75 bg-smoke-50 py-1 px-1 text-black drop-shadow dark:border-slate-400 dark:bg-slate-700 dark:text-white sm:px-1.5">
+    <div className="text-sm sm:text-xl">{unit}</div>
     <div className="text-xs font-medium text-grey-500 dark:text-slate-200">
       {label}
     </div>