tidy up event filters a lil bit, add toggle function

web/src/components/events/eventContainer.module.scss

@@ -12,15 +12,19 @@
 }
 
 .displayOptions {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-gap-column);
-  //padding: 0 var(--spacing-sitepadding);
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+  position: relative;
+  z-index: 10;
+  transition: background-color .5s ease;
 
-  button {
-    border-radius: 0;
-    background: var(--color-deepBrick);
-    color: var(--color-goldenBeige);
+  button:last-child {
+    margin: 0 0 0 auto;
+  }
+
+  &[data-showFilter=true] {
+    background-color: var(--color-background-secondary);
   }
 }
 
@@ -91,6 +95,10 @@
 }
 
 @media (max-width: 1200px) {
+  .eventList {
+    grid-template-columns: 1fr 1fr;
+  }
+
   .calendarWeek {
     grid-template-columns: 1fr;
   }
@@ -116,4 +124,10 @@
       padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
     }
   }
+}
+
+@media (max-width: 700px) {
+  .eventList {
+    grid-template-columns: 1fr;
+  }
 }