change card deck margin strategy

- Instead of negative left/right margins, we selectively apply margins to the cards as needed. This way the first and last child never receive a left and right margin (respectively), so we don't need to negative indent those at the .card-deck level.

- Drops the margin-bottom override on the .card because there's no more default margin there.

- Drop the margin-bottom from the .card-deck to match our lack of margins on the card.

This and the previous commit fixes #19883.

diff --git a/scss/_card.scss b/scss/_card.scss
index deb789ea0e7a49e3bc6da7a0cc409efcc6f9e620..9857ea2d986aa78702b7f88e74cad92ea5249fa6 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -195,17 +195,17 @@
   .card-deck {
     display: flex;
     flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-bottom: $card-spacer-y; // Margin balancing
-    margin-left: -$card-deck-margin;
 
     .card {
       display: flex;
       flex: 1 0 0;
       flex-direction: column;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Margin balancing
-      margin-left: $card-deck-margin;
+
+      // 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; }
     }
   }
 }