Fix wrapping card decks (#22289)

fixes #22007 and fixes #21976 by changing margin strategy for card deck gutters

diff --git a/scss/_card.scss b/scss/_card.scss
index 99f7c21958c815812d299e6f9d4e5ead9acfee11..2c74c0c9715d8a504922a23bbd482d6971d9ed25 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -190,17 +190,15 @@
   .card-deck {
     display: flex;
     flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-left: -$card-deck-margin;
 
     .card {
       display: flex;
       flex: 1 0 0;
       flex-direction: column;
-
-      // Selectively apply horizontal margins to cards to avoid doing the
-      // negative margin dance like our grid. This differs from the grid
-      // due to the use of margins as gutters instead of padding.
-      &:not(:first-child) { margin-left: $card-deck-margin; }
-      &:not(:last-child) { margin-right: $card-deck-margin; }
+      margin-right: $card-deck-margin;
+      margin-left: $card-deck-margin;
     }
   }
 }