make some calendar stylings

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

@@ -1,7 +1,5 @@
 .eventWrapper {
-  background: #ccc;
   margin: calc(var(--spacing-sitepadding)*-1) calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
 }
 
 .eventList {
@@ -23,17 +21,65 @@
   }
 }
 
+.eventCalendar {
+  position: relative;
+}
+
 .calendarYearMonth {
-  h2:first-letter {
-    text-transform: capitalize
+  h2 {
+    font-size: var(--font-size-h1);
+    padding: 1rem var(--spacing-sitepadding);
+    background: var(--color-deepBrick);
+    color: var(--color-goldenOrange);
+    position: sticky;
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
   }
 }
 
-.calendarWeek {}
+.calendarWeek {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+
+  &:nth-of-type(even) {
+    .calendarDay {
+      background: var(--color-background);
+
+      &:nth-of-type(even) {
+        background: var(--color-background-secondary);
+      }
+    }
+  }
+}
 
 .calendarDay {
-  h3:first-letter {
-    text-transform: capitalize
-  }
-}
+  background: var(--color-background-secondary);
+  min-height: 12rem;
+  padding: calc(var(--spacing-gap-column)/2);
 
+  &:nth-of-type(even) {
+    background: var(--color-background);
+  }
+
+  &:first-child {
+    padding-left: var(--spacing-sitepadding);
+  }
+
+  &:last-child {
+    padding-right: var(--spacing-sitepadding);
+  }
+
+  h3 {
+    font-family: var(--font-serif);
+    font-size: var(--font-size-body);
+    font-weight: 400;
+    margin-bottom: 1rem;
+
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+}