make opening hours a nice box too

web/src/components/blocks/openingHoursSectionBlock.module.scss

@@ -1,24 +1,24 @@
 .openingHoursSection {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  column-gap: var(--spacing-gap-column);
-  row-gap: var(--spacing-gap-row);
-
   p {
-      grid-column: 2 / span 10;
+    margin: 0 auto;
   }
 }
 
-.openingHoursSubsection {
-  grid-column: span 5;
-  margin: 1rem 0 0;
+.openingHoursList {
+  margin: var(--spacing-section-bottom) 0;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  background: var(--color-background-secondary);
+}
 
-  &:nth-of-type(odd) {
-    grid-column: 2 / span 5;
-  }
+.openingHoursSubsection {
+  grid-column: span 4;
+  padding: calc(var(--spacing-gap-column)/1.5) var(--spacing-gap-column) var(--spacing-gap-column);
+  font-size: var(--font-size-caption);
 
   h3 {
-    margin-bottom: .5rem;
+    font-size: var(--font-size-lead);
+    margin: 0 0 1rem;
   }
 }
 
@@ -28,14 +28,15 @@
   }
 }
 
-@media (max-width: 1000px) {
-  .openingHoursSection {
-    p {
-      grid-column: 1 / -1;
+@media (max-width: 1200px) {
+  .openingHoursList {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .openingHoursSubsection {
+    padding: var(--spacing-gap-column);
+    h3 {
+      margin-bottom: 0;
     }
   }
-  .openingHoursSubsection,
-  .openingHoursSubsection:nth-of-type(odd) {
-    grid-column: 1 / -1;
-  }
 }