Fix nested cards on card group (#24766)

diff --git a/scss/_card.scss b/scss/_card.scss
index a3a435a7f863a7f0d7dad2327fcbd579fbf91579..4c4845c0bb1fd3572c07156e90d50c7798f6b805 100644 (file)
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -172,14 +172,17 @@
   display: flex;
   flex-direction: column;
 
-  .card {
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
     margin-bottom: $card-group-margin;
   }
 
   @include media-breakpoint-up(sm) {
     flex-flow: row wrap;
-
-    .card {
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
       // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
       flex: 1 0 0%;
       margin-bottom: 0;