design adjustments to calendar and upcoming events

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

@@ -2,7 +2,9 @@
   background: var(--color-deepBrick);
   color: var(--color-goldenBeige);
   margin: 0 calc(var(--spacing-sitepadding)*-1);
-  padding: var(--spacing-sitepadding);
+  padding: 1rem var(--spacing-sitepadding);
+  position: relative;
+  overflow-x: hidden;
 
   h2 {
     margin-bottom: 1rem;
@@ -10,37 +12,26 @@
 }
 
 .eventList {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  --size-item-width: 17rem;
   list-style: none;
-  align-items: center;
+  display: flex;
+  width: calc(var(--size-item-width) * 5);
 
   li {
-    //border-right: var(--border);
-    margin-right: .6rem;
     padding-right: 1rem;
-
-    &:last-child {
-      border: none;
-    }
-
-    // testing testing
-    &:first-child {
-
-      >div:first-child {
-        border-radius: 50%;
-      }
-
-      img {
-        display: none;
-      }
-    }
   }
 }
 
 .calendarLink {
-  text-align: center;
+  padding: 1rem var(--spacing-sitepadding);
+  text-align: right;
   font-family: var(--font-serif);
   font-style: italic;
   font-size: var(--font-size-lead);
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 40%;
+  background: linear-gradient(90deg, transparent, var(--color-deepBrick));
 }