style mobile calendar

web/src/components/events/EventContainer.tsx

@@ -58,7 +58,13 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
           {Object.keys(eventsByDate[yearMonth]).map((week) => (
             <div key={week} className={styles.calendarWeek}>
               {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
-                <div key={day} className={styles.calendarDay}>
+                <div
+                  key={day}
+                  className={`${styles.calendarDay} ${
+                    eventsByDate[yearMonth][week][day].length === 0 &&
+                    styles.empty
+                  }`}
+                >
                   <h3>
                     {formatDate(
                       parse(day, "yyyy-MM-dd", new Date()),

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

@@ -91,9 +91,7 @@
   }
 
   .calendarDay {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    column-gap: var(--spacing-gap-column);
+
     min-height: 0;
     padding: calc(var(--spacing-gap-column)/2) var(--spacing-sitepadding);
 
@@ -101,8 +99,11 @@
       display: none;
     }
 
-    h3 {
-      grid-column: 1 / -1;
+    ul {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: var(--spacing-gap-column);
+      row-gap: var(--spacing-gap-row);
     }
 
     &:first-child,