From 45a605a4bf77077ea719a9e511f87a05d3b8b33d Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Thu, 25 Jan 2024 11:59:41 -0800
Subject: [PATCH] chore: use vars in media queries

---
 src/assets/styles/widgets/media-grid.css | 26 ++++++++++++------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/assets/styles/widgets/media-grid.css b/src/assets/styles/widgets/media-grid.css
index 8c41fe86..4c2e9077 100644
--- a/src/assets/styles/widgets/media-grid.css
+++ b/src/assets/styles/widgets/media-grid.css
@@ -1,3 +1,9 @@
+:root {
+  --grid-square: repeat(2,minmax(0,1fr));
+  --grid-vertical: repeat(3,minmax(0,1fr));
+  --item-wrapper-max-width: 193px;
+}
+
 .now__section--header {
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -9,15 +15,15 @@
 }
 
 .media__grid.square {
-  grid-template-columns: repeat(2,minmax(0,1fr));
+  grid-template-columns: var(--grid-square);
 }
 
 .media__grid.vertical {
-  grid-template-columns: repeat(3,minmax(0,1fr));
+  grid-template-columns: var(--grid-vertical);
 }
 
 .media__grid.vertical .item__wrapper {
-  max-width: 193px;
+  max-width: var(--item-wrapper-max-width);
 }
 
 .media__grid .item__wrapper {
@@ -73,15 +79,9 @@
 }
 
 @media screen and (min-width: 768px) {
-  .media__grid.square {
-    grid-template-columns: repeat(4,minmax(0,1fr));
-  }
-
-  .media__grid.vertical {
-    grid-template-columns: repeat(6,minmax(0,1fr));
-  }
-
-  .media__grid.vertical .item__wrapper {
-    max-width: 121px;
+  :root {
+    --grid-square: repeat(4,minmax(0,1fr));
+    --grid-vertical: repeat(6,minmax(0,1fr));
+    --item-wrapper-max-width: 121px;
   }
 }
\ No newline at end of file