diff --git a/css/main.css b/css/main.css
index 39a41ec7..99b561a4 100644
--- a/css/main.css
+++ b/css/main.css
@@ -3,10 +3,13 @@
   --color-text-dimmed: #666;
   --color-text-bright: #fff;
   --color-background: #000;
-  --font-size: 20px;
+
   --font-primary: "Roboto Condensed";
   --font-secondary: "Roboto";
 
+  --font-size: 20px;
+  --font-size-small: 0.75rem;
+
   --gap-body: 60px;
   --gap-modules: calc(var(--gap-body) / 2);
 }
@@ -53,7 +56,7 @@ body {
 }
 
 .xsmall {
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   line-height: 1.275;
 }
 
@@ -108,7 +111,7 @@ body {
 
 header {
   text-transform: uppercase;
-  font-size: 0.75rem;
+  font-size: var(--font-size-small);
   font-family: var(--font-primary), Arial, Helvetica, sans-serif;
   font-weight: 400;
   border-bottom: 1px solid var(--color-text-dimmed);
diff --git a/modules/default/calendar/calendar.css b/modules/default/calendar/calendar.css
index 65908a70..f04d6838 100644
--- a/modules/default/calendar/calendar.css
+++ b/modules/default/calendar/calendar.css
@@ -1,13 +1,14 @@
 .calendar .symbol {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   padding-left: 0;
   padding-right: 10px;
-  font-size: 80%;
-  vertical-align: top;
+  font-size: var(--font-size-small);
 }
 
 .calendar .symbol span {
-  display: inline-block;
-  transform: translate(0, 2px);
+  padding-top: 4px;
 }
 
 .calendar .title {