style some anchor links and filter buttons

web/src/components/events/EventFilter.tsx

@@ -13,7 +13,7 @@ export const EventFilter = ({
 }) => {
   return (
     <div className={styles.eventFilter}>
-      <span>Filter</span>
+      <span className="suphead">Filter</span>
       <ul>
         {eventCategories
           .filter((x) => x.showInFilters)
@@ -22,7 +22,13 @@ export const EventFilter = ({
               key={category.slug}
               className={activeCategory === category.slug ? styles.active : ""}
             >
-              <button onClick={() => setCategory(activeCategory === category.slug ? null : category.slug)}>
+              <button
+                onClick={() =>
+                  setCategory(
+                    activeCategory === category.slug ? null : category.slug
+                  )
+                }
+              >
                 {category.name}
               </button>
             </li>

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

@@ -9,13 +9,20 @@
   ul {
     list-style: none;
     display: flex;
+    flex-wrap: wrap;
     gap: .5rem;
   }
 
+  button {
+    margin-bottom: 0;
+    background: var(--color-goldenBeige);
+    color: var(--color-deepBrick);
+  }
+
   .active {
     button {
       background: var(--color-deepBrick);
-      color: var(--color-white)
+      color: var(--color-goldenBeige);
     }
   }
 }