event page progress, make separate details component and move some stuff around

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

@@ -3,8 +3,14 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
-  align-items: flex-end;
+  row-gap: var(--spacing-gap-row);
+  align-items: center;
   padding: 0;
+  margin: calc(var(--spacing-sitepadding-block)*-1) auto 0;
+}
+
+.categories {
+  margin: 0 0 var(--spacing-m);
 }
 
 .title {
@@ -13,7 +19,6 @@
 
 .image {
   grid-column: span 2;
-  margin-top: calc(var(--spacing-sitepadding-block)*-2);
 
   img {
     max-width: 100%;
@@ -22,58 +27,14 @@
   }
 }
 
-.text {
-  padding-bottom: var(--spacing-m);
+.details {
+  font-size: var(--font-size-h2);
+  font-family: var(--font-serif);
+  margin: var(--spacing-xs) 0 var(--spacing-l);
 }
 
-.eventDetails {
-  font-size: var(--font-size-caption);
-  margin: var(--spacing-m) 0;
-
-  >div {
-    padding: var(--spacing-xs) 0;
-    border-bottom: var(--border);
-    display: flex;
+@media (max-width: 800px) {
+  .eventHeader {
+    grid-template-columns: 1fr;
   }
-}
-
-.prices {
-  padding: var(--spacing-xs) 0 0;
-  border-top: var(--border);
-  display: flex;
-}
-
-.priceList {
-  list-style: none;
-  //flex-grow: 1;
-}
-
-.priceItem {
-  position: relative;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  /*padding: var(--spacing-xs) 0;
-  border-bottom: var(--border);
-
-  &:first-child {
-    padding-top: 0;
-  }
-
-  &:last-child {
-    border-bottom: 0;
-    padding-bottom: 0;
-  }*/
-}
-
-.priceLabel {
-  display: block;
-}
-
-.label {
-  font-weight: 600;
-}
-
-.label {
-  width: 7rem;
 }