From 966206c21888ddd46f8b041ed2d2265e4ee7c6cb Mon Sep 17 00:00:00 2001
From: mb <mail@manettaberends.nl>
Date: Thu, 29 Jun 2023 15:58:40 +0200
Subject: [PATCH] responsive changes!

---
 static/style.css | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/static/style.css b/static/style.css
index fe8a244..2a868d3 100644
--- a/static/style.css
+++ b/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-right: 2.5em;
+/*    margin-left: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;