fix(card): component renders multiple headings (#12030)

### Related Ticket(s)

[ADCMS-6175](https://jsw.ibm.com/browse/ADCMS-6175)
Closes #12000

### Description

C4DCard and C4DCardCTA both have a `_renderHeading()` method that returns the following:

```
<slot name="heading"></slot>
<c4d-card-heading>${caption}</c4d-card-heading>
```

If these components are authored with a <c4d-card-heading> element within them, it's automatically assigned to slot="heading". This leads to cards with multiple headings, each with their own minimum of 64px of margin-bottom.

![image](https://github.com/user-attachments/assets/ea5fcfb7-230f-4593-a194-3ef84bcfade1)


**Changed**

![image](https://github.com/user-attachments/assets/52a1c050-2a1d-44ea-91a3-a566b8962b51)

packages/web-components/src/components/card/card.ts

@@ -104,7 +104,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
     if (ctaType !== CTA_TYPE.VIDEO) {
       return html`<slot name="heading"></slot>`;
     }
-    const caption = formatVideoCaptionInEffect({ name: videoName });
+    const formatedVideoName = formatVideoCaptionInEffect({ name: videoName });
 
     this.dispatchEvent(
       new CustomEvent(
@@ -116,8 +116,9 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
       )
     );
     return html`
-      <slot name="heading"></slot
-      ><c4d-card-heading part="caption">${caption}</c4d-card-heading>
+      <slot name="heading">
+        <c4d-card-heading>${formatedVideoName}</c4d-card-heading>
+      </slot>
     `;
   }