From cef1e48d14a680c1de0a9c7e0e4c22472c7397c4 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Fri, 12 Jan 2024 16:36:05 +0100
Subject: [PATCH] Add options for responsive grid gap

---
 sass/_grid.scss          | 2 ++
 sass/_personnel.scss     | 5 -----
 templates/personnel.html | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/sass/_grid.scss b/sass/_grid.scss
index 1a42563..d4f0c9e 100644
--- a/sass/_grid.scss
+++ b/sass/_grid.scss
@@ -16,4 +16,6 @@
 	.grid-mobile-1 { grid-template-columns: 1fr }
 	.grid-mobile-2 { grid-template-columns: 1fr 1fr }
 	.grid-mobile-3 { grid-template-columns: 1fr 1fr 1fr }
+
+	.grid-mobile-gap-1 { gap: 1em }
 }
diff --git a/sass/_personnel.scss b/sass/_personnel.scss
index dcae538..ccd88e1 100644
--- a/sass/_personnel.scss
+++ b/sass/_personnel.scss
@@ -52,11 +52,6 @@
 }
 
 @media only screen and (max-width: $width-mobile) {
-	.personnel .grid {
-		grid-template-columns: 1fr 1fr;
-		gap: 1em;
-	}
-
 	.personnel .person img {
 		margin-bottom: .5em;
 	}
diff --git a/templates/personnel.html b/templates/personnel.html
index a943edc..2b1da87 100644
--- a/templates/personnel.html
+++ b/templates/personnel.html
@@ -10,7 +10,7 @@
 			<div id="1" class="button" data-value="1">1. Běh</div>
 			<div id="3" class="button" data-value="3">3. Běh</div>
 		</div>
-		<div class="grid grid-5 gap-3">
+		<div class="grid grid-5 gap-3 grid-mobile-2 grid-mobile-gap-1">
 			{{ macros::personnel() }}
 		</div>
 	</section>