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

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

@@ -0,0 +1,36 @@
+.eventDetails {
+  background: var(--color-background-secondary);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) var(--spacing-sitepadding-block);
+  padding: var(--spacing-s) var(--spacing-sitepadding-inline) var(--spacing-m);
+}
+
+.content {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: var(--spacing-gap-column);
+  margin-bottom: var(--spacing-gap-row);
+  align-items: flex-start;
+}
+
+.priceList {
+  list-style: none;
+  max-width: 10rem;
+}
+
+.priceItem {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  text-align: right;
+}
+
+.priceLabel {
+  display: block;
+  text-align: left;
+}
+
+.label {
+  font-weight: 600;
+  width: 7rem;
+}