Replace inline group-card heading spacing with component CSS class

components/cards.html

@@ -170,7 +170,7 @@
     <p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
 
     <div class="sg-group-card" data-component="group-card">
-      <h2 class="sg-heading-h2 sg-text-on-dark" style="margin-left: var(--card-segment-padding-horizontal);">Gruppenüberschrift</h2>
+      <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
 
       <article class="sg-card" data-component="card" data-component-context="group-card">
         <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">

styles/40-components-cards.css

@@ -167,6 +167,14 @@
   width: calc(50% - var(--spacing-small));
 }
 
+.sg-group-card__heading {
+  flex: 0 0 100%;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: var(--spacing-small);
+  margin-left: var(--card-segment-padding-horizontal);
+}
+
 .sg-page-cards .sg-preview-area {
   display: flex;
   flex-direction: column;