ok

src/components/ItemLister.module.css

@@ -22,11 +22,63 @@
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
   /* padding: 10px; */
-  max-height: calc(3 * (25vw - 20px) + 20px);
+  /* max-height: calc(3 * (25vw - 20px) + 20px); */
   overflow-y: auto;
   height: calc(49vw - 20px);
 }
 
+@media (min-height: 0px) {
+  .grid-container {
+    height: 27vh;
+  }
+}
+@media (min-height: 630px) {
+  .grid-container {
+    height: 27vh;
+  }
+}
+@media (min-height: 636px) {
+  .grid-container {
+    height: 29vh;
+  }
+}
+@media (min-height: 650px) {
+  .grid-container {
+    height: 34vh;
+  }
+}
+@media (min-height: 705px) {
+  .grid-container {
+    height: 37vh;
+  }
+}
+@media (min-height: 735px) {
+  .grid-container {
+    height: 38vh;
+  }
+}
+@media (min-height: 759px) {
+  .grid-container {
+    height: 40vh;
+  }
+}
+@media (min-height: 819px) {
+  .grid-container {
+    height: 44vh;
+  }
+}
+
+@media (min-height: 830px) {
+  .grid-container {
+    height: 47vh;
+  }
+}
+@media (min-height: 892px) {
+  .grid-container {
+    height: 49vh;
+  }
+}
+
 .title-container {
   display: flex;
   align-items: center;
@@ -124,7 +176,6 @@
   font-style: normal;
   font-size: 1.5em;
   padding: 10px 0;
-  margin-bottom: 17px;
 }
 .OptionContainer {
   display: flex;
@@ -136,7 +187,6 @@
   font-style: normal;
   font-size: 0.9em;
   padding: 10px 0;
-  margin-bottom: 17px;
 }
 .PayButton {
   font-family: "Plus Jakarta Sans", sans-serif;