From 43ac3c9cf374fee65b4a44ee9b74ac9fa33b7bb6 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Sat, 1 Jul 2023 11:40:45 +0200
Subject: [PATCH] Add media queries for grid tour styling.

---
 source/scss/components/tours.scss | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/source/scss/components/tours.scss b/source/scss/components/tours.scss
index 16d0943..27bdec7 100644
--- a/source/scss/components/tours.scss
+++ b/source/scss/components/tours.scss
@@ -3,8 +3,16 @@
 .tours {
   display: grid;
   gap: 16px;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--columns, 3), 1fr);
   margin-top: 16px;
+
+  @media (width <= 1200px) {
+    --columns: 2;
+  }
+
+  @media (width <= 800px) {
+    --columns: 1;
+  }
 }
 
 .tour {
@@ -21,7 +29,7 @@
 
     .tour-description,
     .tour-link {
-      grid-column: 1 / 3;
+      grid-column: span 2;
     }
   }