diff --git a/scss/_card.scss b/scss/_card.scss
index ecd797e1f8..c1f2da116b 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -180,22 +180,23 @@
     .card-deck {
       display: flex;
       flex-flow: row wrap;
-      margin-right: -.625rem;
-      margin-left: -.625rem;
+      margin-right: -$card-deck-margin;
+      margin-left: -$card-deck-margin;
 
       .card {
         flex: 1 0 0;
-        margin-right: .625rem;
-        margin-left: .625rem;
+        margin-right: $card-deck-margin;
+        margin-left: $card-deck-margin;
       }
     }
   }
 } @else {
   @include media-breakpoint-up(sm) {
+    $space-between-cards: (2 * $card-deck-margin);
     .card-deck {
       display: table;
       table-layout: fixed;
-      border-spacing: 1.25rem 0;
+      border-spacing: $space-between-cards 0;
 
       .card {
         display: table-cell;
@@ -204,8 +205,8 @@
       }
     }
     .card-deck-wrapper {
-      margin-right: -1.25rem;
-      margin-left: -1.25rem;
+      margin-right: (-$space-between-cards);
+      margin-left: (-$space-between-cards);
     }
   }
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f02d4a16bf..322baf4123 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -486,6 +486,8 @@ $card-bg:                  #fff !default;
 
 $card-link-hover-color:    #fff !default;
 
+$card-deck-margin:         .625rem !default;
+
 
 // Tooltips