fix: teeniest screen size mobile responsivess for schedule

Author: JoshuaKGoldberg

src/components/ScheduledActivity.astro

@@ -28,26 +28,20 @@ const descriptionLines = await Promise.all(
 
 <style>
 	.scheduled-activity {
-		display: grid;
 		font-family: var(--fontFamilyBody);
-		gap: 0.75rem 1rem;
-		grid-template-columns: clamp(5rem, 20vw, 10rem) auto;
-		grid-template-rows: auto auto;
 		margin: 0 var(--widthBodyPadding) 3rem;
 		max-width: var(--widthBodyLean);
 	}
 
 	.activity-title {
 		font-size: var(--fontSizeH3);
-		grid-area: 1 / 2 / 2 / 3;
 	}
 
 	.activity-locators {
 		display: flex;
-		flex-direction: column;
 		gap: 0.75rem;
-		grid-area: 1 / 1 / 3 / 2;
-		text-align: right;
+		justify-content: space-between;
+		margin: 0.5rem 0;
 	}
 
 	.activity-time {
@@ -57,14 +51,39 @@ const descriptionLines = await Promise.all(
 
 	.activity-location {
 		font-size: var(--fontSizeBody);
+		text-align: right;
 	}
 
 	.activity-description {
 		display: flex;
 		gap: 0.5rem;
 		flex-direction: column;
-		grid-area: 2 / 2 / 3 / 3;
 		font-size: var(--fontSizeBody);
 		width: 100%;
 	}
+
+	@media (min-width: 490px) {
+		.scheduled-activity {
+			display: grid;
+			grid-template-columns: clamp(5rem, 20vw, 10rem) auto;
+			grid-template-rows: auto auto;
+			gap: 0.75rem 1rem;
+		}
+
+		.activity-title {
+			grid-area: 1 / 2 / 2 / 3;
+		}
+
+		.activity-locators {
+			grid-area: 1 / 1 / 3 / 2;
+			flex-direction: column;
+			margin: 0;
+			justify-content: flex-start;
+			text-align: right;
+		}
+
+		.activity-description {
+			grid-area: 2 / 2 / 3 / 3;
+		}
+	}
 </style>