Update styles for Review2024LevelFour: enhance grid layout and add re…

…sponsive design for linksGrid
carrismetropolitana · Jan 13, 2025 · 0b0a3f6 · 0b0a3f6
1 parent 3a44d1a
commit 0b0a3f6
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/frontend/components/review-2024/Review2024LevelFour/styles.module.css b/frontend/components/review-2024/Review2024LevelFour/styles.module.css
@@ -36,8 +36,8 @@
 
 .linksGrid {
 	display: grid;
-	grid-template-rows: repeat(2, 1fr);
-	grid-template-columns: repeat(2, 1fr);
+	grid-template-rows: 1fr 1fr;
+	grid-template-columns: 1fr 1fr;
 	gap: var(--size-spacing-20);
 	align-items: stretch;
 	width: 100%;
@@ -47,4 +47,16 @@
 	background-color: var(--color-primary-white);
 	border: 1px solid var(--color-system-border-100);
 	border-radius: 18px;
+}
+
+@media (width <= 1000px) {
+	.linksGrid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (width <= 650px) {
+	.linksGrid {
+		padding: 20px;
+	}
 }