responsive changes!

static/style.css

@@ -345,11 +345,12 @@ a:link {
     grid-template-columns: auto auto auto auto auto;
     align-items: center;
     justify-items: center;
-    margin-left:2.5em;
+/*    margin-left:2.5em;*/
-    margin-right: 2.5em;
+/*    margin-right: 2.5em;*/
     margin-bottom: 8em;
     margin-top: 29em;
-    gap: 70px;
+/*    gap: 70px;*/
+    grid-row-gap: 70px;
     position: relative;
     
 }
@@ -367,8 +368,21 @@ a:link {
   filter: blur(6px);
 }
 
+
+/* Styles for bigger-sized screens */
+@media (min-width: 1025px) {
+  .grid {
+      grid-template-columns: repeat(5, 1fr);
+  }
+}
+/* Styles for big-sized screens */
+@media (max-width: 1024px) {
+  .grid {
+      grid-template-columns: repeat(4, 1fr);
+  }
+}
 /* Styles for medium-sized screens */
-@media (max-width: 768px) {
+@media (max-width: 820px) {
   .grid {
       grid-template-columns: repeat(3, 1fr);
   }
@@ -388,7 +402,7 @@ a:link {
 }
 
 /* Styles for smaller screens */
-@media (max-width: 480px) {
+@media (max-width: 640px) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
     margin-top: 19em;