fixed display of events on home

_sass/template/components/_component--upcoming-events.scss

@@ -104,6 +104,81 @@
 		}		
 	}
 
+	.subevents {
+		@include grid-child($cols:12);
+		width: 100vw;
+		max-width: 1296px; //1240 standard max + padding
+		box-sizing: border-box;
+		margin-left: -28px;
+		padding-left: 28px;
+		padding-right: 28px;
+		background-color: color(neutral, XXB);
+		grid-row: 4;
+		margin-bottom: -.75rem !important;
+		li { border-bottom: none; }
+	}
+
+	.subevent-link {
+		@include grid-child($cols:12);
+		text-decoration: none;
+	}
+
+	.subevent-link:hover,
+	.subevent-link:hover small {
+		text-decoration: underline;
+		color: color(green, XX);
+	}
+
+	.subevent-title {
+		grid-column: 	1 / -1;
+		grid-row: 4;
+		@include typestyle($sans-sm-reg);
+		@include respond-to(s){
+			grid-column: 4 / -1;
+			grid-row: 2;
+			// min-height: bl(10); 
+		}
+	}
+
+	.subevent-date {
+		grid-column: 1 / -1;
+		grid-row: 1;
+		margin-bottom: 0;
+		@include respond-to(s){
+			grid-column: 1 / 4;
+		}
+	}
+
+	.subevent-time {
+		grid-column: 1 / -1;
+		grid-row: 2;
+		@include typestyle($sans-xs-reg);
+		@include respond-to(s){
+			@include typestyle($sans-sm-reg);
+			grid-column: 1 / 4;
+		}
+	}
+
+	.subevent-type {
+		grid-column: 1 / -1;
+		grid-row: 3;
+		margin-bottom: 0;
+		@include respond-to(s){
+			grid-column: 4 / -1;
+			grid-row: 1;
+		}
+	}
+
+	.subevent-series {
+		grid-column: 1 / -1;
+		grid-row: 5;
+		@include stack(xxs);
+		@include respond-to(s){
+			grid-column: 4 / -1;
+			grid-row: 3;
+		}
+	}
+
 	.upcoming-events--more {
 		grid-column: 1 / -1;
 	}