update divider for smaller device screens

1 files changed, 3 insertions, 3 deletions

diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index 54a3fa3..cdfa979 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -5,12 +5,12 @@ interface DividerProps {
 
 const Divider = (props: DividerProps) => {
   return (
-    <div className="flex flex-col items-center justify-center bg-black h-28 mx-24 rounded-xl px-72">
-      <div className="px-2 mt-2 text-white text-4xl font-extrabold">
+    <div className="flex flex-col items-center justify-center bg-black h-28 mx-6 sm:mx-12 md:mx-24 rounded-xl px-4 sm:px-12 md:px-72">
+      <div className="px-2 mt-2 text-white text-2xl sm:text-3xl md:text-4xl font-extrabold">
         {props.text}
       </div>
       {props.description && (
-        <div className="px-2 my-2 text-white text-lg font-medium">
+        <div className="px-2 my-2 text-white text-sm sm:text-base md:text-lg font-medium">
           {props.description}
         </div>
       )}