feat(content-group-cards-item): add gutters for mobile (#12217)

Related Ticket(s)

[ADCMS-6623](https://jsw.ibm.com/browse/ADCMS-6623)

Description

It's difficult to see that cards are clickable rather than just having differently colored background when they display full-width. Add proper "gutter" space on the left and right sides of cards to suggest that they are clickable cards.

Changelog

A `margin-inline: $spacing-05` was added for small screen to add left and right space on the `content-group-cards` component.

packages/styles/scss/components/card/_card.scss

@@ -179,6 +179,14 @@
     }
   }
 
+  // Gutter space for mobile view
+  :host(#{$c4d-prefix}-content-group-cards-item) {
+    @include breakpoint-down(md) {
+      inline-size: auto;
+      margin-inline: $spacing-05;
+    }
+  }
+
   // Card with pictogram placement style
   :host(#{$c4d-prefix}-card-group-item),
   :host(#{$c4d-prefix}-card-in-card),