fully responsive event page and components

src/components/Filter/Filter.module.css

@@ -5,7 +5,6 @@
     overflow: hidden;
     max-height: 0;
     opacity: 0;
-    transform: translateY(-10px);
     transition: max-height 0.5s ease, opacity 0.8s ease, transform 0.5s ease;
 }
 
@@ -18,7 +17,6 @@
 .filterClose{
     max-height: 200px;
     opacity: 0;
-    transform: translateY(-10px);
 }
 
 
@@ -51,6 +49,7 @@
 
 .filterTag svg {
     transform: scale(1);
+    color: black;
 }
 
 
@@ -61,4 +60,26 @@
 .active svg {
     fill: #019AFF;
     transform: scale(1);
+}
+
+@media screen and (max-width: 768px){
+    .filterContainer {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .filterOpen{
+        display: flex;
+    }
+    .filterClose{
+        display: none;
+    }
+
+    .filterMenu {
+        width: 100%;
+    }
+
+    abbr {
+        width: fit-content;
+    }
 }