Switch cards component to grid from flex.

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);

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;
 

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 {