From 4ceb5f77c1339728fd27022ea4bb08a5ece94213 Mon Sep 17 00:00:00 2001
From: Emi Simpson <emi@alchemi.dev>
Date: Mon, 8 Nov 2021 17:19:21 -0500
Subject: [PATCH] Make grid cards work on mobile

---
 static/style.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/static/style.css b/static/style.css
index a85b7d5..9bc8369 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,6 +84,25 @@ header {
 	background-color: #ff964a;
 	grid-area: 3/3/5/4;
 }
+@media (max-width: 1160px) {
+	#cards {
+		grid-template-columns: repeat(2, 350px);
+		gap: 50px;
+		justify-content: center;
+	}
+	.card:nth-child(3) {
+		grid-area: 3/1/6/2;
+	}
+}
+@media (max-width: 800px) {
+	#cards {
+		grid-template-columns: 350px;
+		row-gap: 50px
+	}
+	#cards .card {
+		grid-area: initial;
+	}
+}
 
 /* Card Specific Details */
 .card:nth-child(1) > h2 {