style schedule block

web/src/components/blocks/ScheduleBlock.tsx

@@ -30,7 +30,7 @@ export const ScheduleBlock = ({
   return (
     <section className={styles.schedule}>
       {block.scheduleTitle && (
-        <h2 className={styles.title}>{block.scheduleTitle}</h2>
+        <h2 className={styles.heading}>{block.scheduleTitle}</h2>
       )}
       <dl className={styles.items}>
         {block.scheduleItems?.map((item, index) => {
@@ -46,6 +46,7 @@ export const ScheduleBlock = ({
               <dt className={styles.time}>{scheduleItem.time}</dt>
               <dd className={styles.body}>
                 <div
+                  className={styles.title}
                   dangerouslySetInnerHTML={{
                     __html: scheduleItem.scheduleItemTitle,
                   }}

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

@@ -3,7 +3,8 @@
   margin: 0 auto var(--spacing-section-bottom);
 }
 
-.title {
+.heading {
+  font-size: var(--font-size-h3);
   margin: 0 0 var(--spacing-s);
 }
 
@@ -14,7 +15,7 @@
 .item {
   display: flex;
   gap: var(--spacing-s);
-  padding: var(--spacing-xs) 0;
+  padding: var(--spacing-s) 0;
   border-top: var(--border);
 
   &:last-child {
@@ -22,9 +23,24 @@
   }
 }
 
+.title {
+  font-weight: 600;
+  font-size: 1.1rem;
+  line-height: 1;
+
+  a {
+    text-decoration-thickness: .1rem;
+    -webkit-text-decoration-color: var(--color-goldenOrange);
+    text-decoration-color: var(--color-goldenOrange);
+    transition: text-decoration-color var(--transition-easing);
+    font-weight: 600;
+  }
+}
+
 .time {
   flex: 0 0 8rem;
-  font-weight: 600;
+  font-family: var(--font-serif);
+  line-height: 1.1rem;
 }
 
 .body {
@@ -35,3 +51,12 @@
   margin-top: var(--spacing-xs);
   font-size: var(--font-size-caption);
 }
+
+@media (max-width: 800px) {
+  .item {
+    display: block;
+  }
+  .time {
+    margin-bottom: var(--spacing-xs);
+  }
+}