Make StaySafe Page Responsive

src/index.css

@@ -30,7 +30,7 @@ body {
 
 @media (max-width: 576px) {
   body {
-    font-size: 1rem
+    font-size: 1.2rem
   }
 }
 

src/styles/CardsStyles.js

@@ -1,3 +1,5 @@
+import sizes from "./sizes";
+
 export default {
   card: {
     width: "100%",
@@ -24,6 +26,10 @@ export default {
 
   cardTitle: {
     textTransform: "capitalize",
+
+    [sizes.down("sm")]: {
+      fontSize: "1.6rem",
+    },
   },
   cardImage: {
     display: "block",

src/styles/DisplayTable.css

@@ -127,7 +127,7 @@ table {
   .delta-confirmed,
   .delta-recovered,
   .delta-deceased {
-    font-size: 1.2rem;
+    font-size: .9rem;
     margin-left: .5rem;
   }
 

src/styles/NavbarStyles.js

@@ -71,7 +71,6 @@ export default {
     },
 
     [sizes.down("xs")]: {
-      fontSize: "1.2rem",
       marginBottom: ".5rem",
     },
   },

src/styles/StaySafeStyles.js

@@ -1,16 +1,30 @@
+import sizes from "./sizes";
+
 export default {
   staySafe: {
     textAlign: "center",
 
     "& h1": {
       marginBottom: "4.5rem",
+
+      [sizes.down("lg")]: {
+        margin: "4rem 0",
+      },
+
+      [sizes.down("md")]: {
+        margin: "2.5rem 0",
+      },
     },
   },
   cardsBox: {
     display: "flex",
-    width: "100%",
     flexWrap: "wrap",
+    padding: "2rem",
     justifyContent: "space-around",
     alignItems: "stretch",
+
+    [sizes.down("sm")]: {
+      padding: "0",
+    },
   },
 };