make opening hours a nice box too

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -46,23 +46,25 @@ export async function OpeningHoursSectionBlock() {
   return (
     <section className={styles.openingHoursSection}>
       {announcement && <p>{announcement}</p>}
-      {subsections.map((subsection) => {
-        const [slug, title] = subsection;
-        const prettyHours = getPrettyOpeningHoursForFunction(
-          allOpeningHours,
-          slug
-        );
-        if (!prettyHours || prettyHours?.length === 0) {
-          return <></>;
-        }
-        return (
-          <OpeningHoursSubsection
-            key={slug}
-            title={title}
-            prettyHours={prettyHours}
-          />
-        );
-      })}
+      <div className={styles.openingHoursList}>
+        {subsections.map((subsection) => {
+          const [slug, title] = subsection;
+          const prettyHours = getPrettyOpeningHoursForFunction(
+            allOpeningHours,
+            slug
+          );
+          if (!prettyHours || prettyHours?.length === 0) {
+            return <></>;
+          }
+          return (
+            <OpeningHoursSubsection
+              key={slug}
+              title={title}
+              prettyHours={prettyHours}
+            />
+          );
+        })}
+      </div>
     </section>
   );
 }

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;
-  }
 }