Improve shapes layout on home page

components/ShapesBackground.module.css

@@ -36,21 +36,21 @@
 /* * * HOME PAGE * * */
 
 .homeDots {
-  top: 6vh;
+  top: calc(0.06 * (580rem / 0.65) / 16);
   left: calc(-32rem / 16);
   width: calc(168rem / 16);
   height: calc(204rem / 16);
 }
 
 .homeHash1 {
-  top: 32vh;
+  top: calc(0.32 * (580rem / 0.65) / 16);
   left: 12vw;
   width: calc(60rem / 16);
   height: calc(60rem / 16);
 }
 
 .homeTriangle1 {
-  top: 5vh;
+  top: calc(0.05 * (580rem / 0.65) / 16);
   left: 20vw;
   width: calc(68rem / 16);
   height: calc(68rem / 16);
@@ -58,14 +58,14 @@
 }
 
 .homeWaves1 {
-  top: 50vh;
+  top: calc(0.5 * (580rem / 0.65) / 16);
   left: 24vw;
   width: calc(116rem / 16);
   height: calc(58rem / 16);
 }
 
 .homeTriangle2 {
-  top: 2vh;
+  top: calc(0.02 * (580rem / 0.65) / 16);
   right: 40vw;
   width: calc(68rem / 16);
   height: calc(68rem / 16);
@@ -73,22 +73,76 @@
 }
 
 .homePlus {
-  top: 42vh;
+  top: calc(0.42 * (580rem / 0.65) / 16);
   right: 22vw;
   width: calc(48rem / 16);
   height: calc(48rem / 16);
 }
 
 .homeWaves2 {
-  top: 10vh;
+  top: calc(0.1 * (580rem / 0.65) / 16);
   right: 18vw;
   width: calc(102rem / 16);
   height: calc(50rem / 16);
 }
 
 .homeHash2 {
-  top: 25vh;
+  top: calc(0.25 * (580rem / 0.65) / 16);
   right: 9vw;
   width: calc(60rem / 16);
   height: calc(60rem / 16);
 }
+
+@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
+  .homeDots {
+    top: 6vh;
+  }
+  .homeHash1 {
+    top: 32vh;
+  }
+  .homeTriangle1 {
+    top: 5vh;
+  }
+  .homeWaves1 {
+    top: 50vh;
+  }
+  .homeTriangle2 {
+    top: 2vh;
+  }
+  .homePlus {
+    top: 42vh;
+  }
+  .homeWaves2 {
+    top: 10vh;
+  }
+  .homeHash2 {
+    top: 25vh;
+  }
+}
+
+@media only screen and (max-height: calc((420rem / 0.65) / 16)) {
+  .homeDots {
+    top: calc(0.06 * (420rem / 0.65) / 16);
+  }
+  .homeHash1 {
+    top: calc(0.32 * (420rem / 0.65) / 16);
+  }
+  .homeTriangle1 {
+    top: calc(0.05 * (420rem / 0.65) / 16);
+  }
+  .homeWaves1 {
+    top: calc(0.5 * (420rem / 0.65) / 16);
+  }
+  .homeTriangle2 {
+    top: calc(0.02 * (420rem / 0.65) / 16);
+  }
+  .homePlus {
+    top: calc(0.42 * (420rem / 0.65) / 16);
+  }
+  .homeWaves2 {
+    top: calc(0.1 * (420rem / 0.65) / 16);
+  }
+  .homeHash2 {
+    top: calc(0.25 * (420rem / 0.65) / 16);
+  }
+}