styling corrections

src/styles/_calendar.scss

@@ -209,22 +209,38 @@
   }
 }
 
-@media screen and (max-width: 500px) {
-  .calendar-table {
-    td {
-      width: unset;
-      height: unset;
-    }
-
-    tr {
-      gap: 1rem;
-    }
-  }
-}
-
 @media screen and (max-width: 800px) {
   .calendars {
     gap: 5rem;
     padding: 2.4rem 0;
   }
+  .calendar-table {
+    td {
+      width: 1rem;
+      height: 1rem;
+    }
+    span {
+      font-size: 1.6rem;
+    }
+  }
+  .calendar-table tr {
+    gap: 0.4rem;
+  }
+  .calendar-table td.selected .event {
+    padding: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 18.3rem;
+    left: -230%;
+  }
+  .calendars-right {
+    padding: 0 4rem;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .calendars-right {
+    padding: 0 3rem;
+  }
 }