misc happy styling, event header tables, etc

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

@@ -4,7 +4,7 @@
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   align-items: flex-end;
-  padding: 0 0 var(--spacing-sitepadding-inline) 0;
+  padding: 0;
 }
 
 .title {
@@ -18,29 +18,62 @@
   img {
     max-width: 100%;
     height: auto;
+    display: block;
   }
 }
 
-.details {}
+.text {
+  padding-bottom: var(--spacing-m);
+}
+
+.eventDetails {
+  font-size: var(--font-size-caption);
+  margin: var(--spacing-m) 0;
+
+  >div {
+    padding: var(--spacing-xs) 0;
+    border-bottom: var(--border);
+    display: flex;
+  }
+}
 
 .prices {
-  margin: 2rem 0 var(--spacing-s);
-
-  h2 {
-    font-size: var(--spacing-s);
-    font-family: var(--font-main);
-  }
+  padding: var(--spacing-xs) 0 0;
+  border-top: var(--border);
+  display: flex;
 }
 
 .priceList {
   list-style: none;
+  //flex-grow: 1;
 }
 
 .priceItem {
-  font-size: var(--font-size-caption);
   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;
 }