event page progress, date list redesign and details grid

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

@@ -1,20 +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);
+  padding: var(--spacing-m) var(--spacing-sitepadding-inline) var(--spacing-m);
+  font-family: var(--font-serif);
+
+  h2 {
+    font-family: var(--font-main);
+    margin-bottom: var(--spacing-xs);
+  }
 }
 
 .content {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
   margin-bottom: var(--spacing-gap-row);
   align-items: flex-start;
 }
 
+.info {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-m);
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
 .priceList {
   list-style: none;
-  max-width: 10rem;
+  max-width: 13rem;
 }
 
 .priceItem {
@@ -35,8 +51,24 @@
   width: 7rem;
 }
 
+.dateList {
+  grid-column: span 2;
+}
+
 @media (max-width: 800px) {
   .content {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  .info, .dateList {
+    grid-column: 1 / -1;
+  }
+
+  .dateList {
+    order: 1;
+  }
+
+  .info {
+    order: 2;
+  }
 }