Make footer responsive

Author: PrinceSumberia

src/styles/FooterStyles.js

@@ -1,10 +1,25 @@
+import sizes from "./sizes";
+
 export default {
   footer: {
     display: "flex",
     justifyContent: "space-around",
     marginTop: "3rem",
     padding: "4rem",
+
+    [sizes.down("md")]: {
+      marginTop: "2rem",
+      padding: "2rem",
+    },
+
+    [sizes.down("sm")]: {
+      marginTop: "1rem",
+      padding: "1.5rem",
+      flexDirection: "column",
+      alignItems: "center",
+    },
   },
+
   btn: {
     padding: "1.5rem 4rem",
     fontFamily: "inherit",
@@ -14,12 +29,31 @@ export default {
     color: "white",
     transition: "all .3s",
     transform: "translateY(-.5rem)",
-    boxShadow: "0 .5rem 2rem rgba(0,0,0,.5)",
     textDecoration: "none",
 
+    [sizes.down("md")]: {
+      padding: "1rem 2.5rem",
+      fontSize: "1.6rem",
+    },
+
+    [sizes.down("sm")]: {
+      marginBottom: "1rem",
+      textAlign: "center",
+      boxShadow: "0",
+      fontSize: "1.3rem",
+      padding: ".5rem 2.5rem",
+      transform: "translateY(0)",
+      borderRadius: "5px",
+      width: "15rem",
+    },
+
     "&:hover": {
       transform: "translateY(0)",
       boxShadow: "0 .25rem 1rem rgba(0,0,0,.25)",
+
+      [sizes.down("sm")]: {
+        boxShadow: "none",
+      },
     },
   },