fix: fix card scss

Author: thingsym

docs/css-dart-sass/card.css

@@ -6,15 +6,18 @@
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  gap: 2rem;
+  row-gap: 2rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
 .card {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 calc( 33.3333333333% - 2rem + 0.6666666667rem);
-  flex: 0 0 calc( 33.3333333333% - 2rem + 0.6666666667rem);
+  -ms-flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
+  flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
   border: solid 3px #ddd;
   padding: 1rem;
 }

docs/css/card.css

@@ -6,15 +6,18 @@
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  gap: 2rem;
+  row-gap: 2rem;
+  -webkit-column-gap: 1rem;
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
 }
 
 .card {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-box-flex: 0;
-  -ms-flex: 0 0 calc( 33.3333333333% - 2rem + 0.6666666667rem);
-  flex: 0 0 calc( 33.3333333333% - 2rem + 0.6666666667rem);
+  -ms-flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
+  flex: 0 0 calc( 33.3333333333% - 1rem + 0.3333333333rem);
   border: solid 3px #ddd;
   padding: 1rem;
 }

docs/dart-sass/card.scss

@@ -1,13 +1,13 @@
 @use '../../dart-sass/flexbox-grid-mixins';
 
-$default-grid-gutter: 2rem;
+$default-grid-gap: 2rem 1rem;
 
 .cards {
-  @include flexbox-grid-mixins.grid($flex-wrap: wrap, $gap: $default-grid-gutter);
+  @include flexbox-grid-mixins.grid($flex-wrap: wrap, $gap: $default-grid-gap);
 }
 
 .card {
-  @include flexbox-grid-mixins.grid-col($col: 4, $gap: $default-grid-gutter);
+  @include flexbox-grid-mixins.grid-col($col: 4, $gap: $default-grid-gap);
   border: solid 3px #ddd;
   padding: 1rem;
 }

docs/sass/card.scss

@@ -1,13 +1,13 @@
 @import '../../sass/flexbox-grid-mixins';
 
-$default-grid-gutter: 2rem;
+$default-grid-gap: 2rem 1rem;
 
 .cards {
-  @include grid($flex-wrap: wrap, $gap: $default-grid-gutter);
+  @include grid($flex-wrap: wrap, $gap: $default-grid-gap);
 }
 
 .card {
-  @include grid-col($col: 4, $gap: $default-grid-gutter);
+  @include grid-col($col: 4, $gap: $default-grid-gap);
   border: solid 3px #ddd;
   padding: 1rem;
 }