Responsive design!

public/css/style.css

@@ -73,14 +73,47 @@
     padding-bottom: 10px;
     text-align: center;
 }
-
 .gh-card-container {
     display: grid;
-    grid-template-columns: 23% 23% 23% 23%;
-    grid-gap: 2%;
-    margin-left: 30px;
+    grid-template-columns: 100%;
+    grid-gap: 0%;
+}
+
+@media only screen and (max-width: 800px) {
+    .gh-card {
+        margin: 20px auto;
+    }
 }
 
+@media only screen and (min-width: 800px) {
+    .gh-card-container {
+        display: grid;
+        grid-template-columns: 45% 45%;
+        grid-gap: 5%;
+        margin-left: 5%;
+    }
+}
+
+@media only screen and (min-width: 1000px) {
+    .gh-card-container {
+        display: grid;
+        grid-template-columns: 30% 30% 30%;
+        grid-gap: 3%;
+        margin-left: 3%;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .gh-card-container {
+        display: grid;
+        grid-template-columns: 23% 23% 23% 23%;
+        grid-gap: 2%;
+        margin-left: 2%;
+    }
+}
+
+
+
 .gh-back {
     position: fixed;
     top: 30px;