Add shapes background to mobile home page

components/ShapesBackground.module.css

@@ -1,5 +1,6 @@
 .shapesContainer {
   position: absolute;
+  overflow: hidden;
   top: 0;
   left: 0;
   right: 0;
@@ -8,17 +9,19 @@
 }
 
 .shape {
-  position: absolute;
-
   --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
     brightness(92%) contrast(93%);
   --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
     brightness(91%) contrast(88%);
+
+  position: absolute;
+  filter: var(--blue);
+  opacity: 20%;
 }
 
 .homeDots {
   top: calc(0.06 * (580rem / 0.65) / 16);
-  left: calc(-32rem / 16);
+  right: 90vw;
   width: calc(168rem / 16);
   height: calc(204rem / 16);
   filter: var(--teal);
@@ -30,8 +33,6 @@
   left: 12vw;
   width: calc(60rem / 16);
   height: calc(60rem / 16);
-  filter: var(--blue);
-  opacity: 20%;
 }
 
 .homeTriangle1 {
@@ -50,7 +51,6 @@
   width: calc(116rem / 16);
   height: calc(58rem / 16);
   filter: var(--teal);
-  opacity: 20%;
 }
 
 .homeTriangle2 {
@@ -59,8 +59,6 @@
   width: calc(68rem / 16);
   height: calc(68rem / 16);
   transform: rotate(-26deg);
-  filter: var(--blue);
-  opacity: 20%;
 }
 
 .homePlus {
@@ -68,8 +66,6 @@
   right: 22vw;
   width: calc(48rem / 16);
   height: calc(48rem / 16);
-  filter: var(--blue);
-  opacity: 20%;
 }
 
 .homeWaves2 {
@@ -78,7 +74,6 @@
   width: calc(102rem / 16);
   height: calc(50rem / 16);
   filter: var(--teal);
-  opacity: 20%;
 }
 
 .homeHash2 {
@@ -86,8 +81,6 @@
   right: 9vw;
   width: calc(60rem / 16);
   height: calc(60rem / 16);
-  filter: var(--blue);
-  opacity: 20%;
 }
 
 @media only screen and (max-height: calc((580rem / 0.65) / 16)) {
@@ -143,3 +136,62 @@
     top: calc(0.25 * (420rem / 0.65) / 16);
   }
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .homeDots {
+    top: 0;
+    right: 80vw;
+    width: calc(168rem / 16);
+    height: calc(152rem / 16);
+    filter: var(--blue);
+    opacity: 20%;
+  }
+
+  .homeHash1 {
+    top: calc(190rem / 16);
+    left: unset;
+    right: 87vw;
+    width: calc(60rem / 16);
+    height: calc(60rem / 16);
+  }
+
+  .homeTriangle1 {
+    top: calc(266rem / 16);
+    left: unset;
+    right: 78vw;
+    width: calc(45rem / 16);
+    height: calc(45rem / 16);
+    transform: rotate(-26deg);
+    filter: var(--blue);
+    opacity: 20%;
+  }
+
+  .homeWaves1 {
+    display: none;
+  }
+
+  .homeTriangle2 {
+    top: calc(4rem / 16);
+    right: 3vw;
+    width: calc(45rem / 16);
+    height: calc(45rem / 16);
+    transform: rotate(16deg);
+  }
+
+  .homePlus {
+    display: none;
+  }
+
+  .homeWaves2 {
+    top: calc(168rem / 16);
+    left: 86vw;
+    right: unset;
+    width: calc(102rem / 16);
+    height: calc(50rem / 16);
+    filter: var(--blue);
+  }
+
+  .homeHash2 {
+    display: none;
+  }
+}