From 747bec3cc653713f8780f753d8f138239fefbe9c Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Mon, 30 Jan 2023 09:57:00 +0100
Subject: [PATCH] Switch cards component to grid from flex.

---
 assets/sass/components/cards/_cards.scss            |  7 ++++++-
 .../sass/components/flex-inline/_flex-inline.scss   |  4 +++-
 assets/sass/components/grid-group/_grid-group.scss  | 13 ++++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/assets/sass/components/cards/_cards.scss b/assets/sass/components/cards/_cards.scss
index 67ab56c..d56566c 100644
--- a/assets/sass/components/cards/_cards.scss
+++ b/assets/sass/components/cards/_cards.scss
@@ -4,7 +4,7 @@
 
 .cards,
 %cards {
-  @extend %flex-group;
+  @extend %grid-group;
   // Add vertical rhythm margins.
   @include margin-block(1);
 }
@@ -18,6 +18,11 @@
     border-color: var(--color-highlight);
   }
 
+  &--featured {
+    grid-row: span 2;
+    grid-column: span 2;
+  }
+
   &--inverted {
     @extend %link-inverted;
     background: var(--color-border);
diff --git a/assets/sass/components/flex-inline/_flex-inline.scss b/assets/sass/components/flex-inline/_flex-inline.scss
index 231b742..9859284 100644
--- a/assets/sass/components/flex-inline/_flex-inline.scss
+++ b/assets/sass/components/flex-inline/_flex-inline.scss
@@ -1,8 +1,10 @@
 .flex-inline,
 %flex-inline {
+  --gap: .5rem;
+
   display: flex;
   flex-wrap: wrap;
-  gap: .5rem;
+  gap: var(--gap);
   padding: 0;
   text-align: left;
 
diff --git a/assets/sass/components/grid-group/_grid-group.scss b/assets/sass/components/grid-group/_grid-group.scss
index 386bb16..fa3abc6 100644
--- a/assets/sass/components/grid-group/_grid-group.scss
+++ b/assets/sass/components/grid-group/_grid-group.scss
@@ -1,15 +1,14 @@
 .grid-group,
 %grid-group {
-  $gap: 1;
+  --column-min: 200px;
+  --gap: 1.5rem;
 
-  --column-min: 250px;
-
-  @include gap($gap);
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
+  gap: var(--gap);
+  grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr));
 
-  &--fit {
-    grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr));
+  &--fill {
+    grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
   }
 
   &--100 {