From 6f5e2cdc254a64ee0b0218a643b0a7f105dbefc5 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Mon, 8 Apr 2024 16:03:05 -0700
Subject: [PATCH] style: responsiveness (#94)

---
 .../components/Speakers/Speakers.module.scss  | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss
index cde601a1..b4ea3d4b 100644
--- a/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/Speakers/Speakers.module.scss
@@ -37,7 +37,16 @@
 		flex-direction: column;
 		justify-content: center;
 		gap: 4rem;
-		max-width: 80%;
+
+		@media screen and (min-width: 640px) {
+			max-width: 80%;
+		}
+
+		@media screen and (min-width: 1280px) {
+			max-width: unset;
+			margin-top: 5rem;
+			gap: 8rem;
+		}
 
 		.polaroidHeading {
 			position: relative;
@@ -61,39 +70,42 @@
 			text-align: center;
 
 			.keynotePolaroid {
-				width: 70%;
 				background: no-repeat center;
 				background-size: contain;
 
 				display: grid;
 				place-content: center;
 
+				@media screen and (min-width: 640px) {
+					width: 90%;
+				}
 				.content {
 					margin: 0 auto;
-					width: 70%;
+					width: 80%;
 				}
 			}
 		}
 
 		.people {
 			display: grid;
-			grid-template-columns: repeat(2, 1fr);
-			row-gap: 3rem;
-			column-gap: 1rem;
+			grid-template-columns: repeat(1, 1fr);
+			row-gap: 2rem;
+			max-width: min(350px, 80%);
+			margin: auto;
+
+			@media screen and (min-width: 640px) {
+				grid-template-columns: repeat(2, 1fr);
+				max-width: unset;
+			}
 
 			@media screen and (min-width: 768px) {
-				column-gap: 3rem;
+				column-gap: 2rem;
 			}
 
 			@media screen and (min-width: 1280px) {
 				grid-template-columns: repeat(3, 1fr);
 			}
 		}
-
-		@media screen and (min-width: 1280px) {
-			margin-top: 5rem;
-			gap: 8rem;
-		}
 	}
 
 	@media screen and (min-width: 640px) {