fix(card): Do not apply text color to slotted footer items (#8839)

**Related Issue:** #8855 

## Summary
This removes the styles set on footer elements, as it could
unintentionally style components slotted directly that themselves do not
ensure a text color is set. The workaround is to add a wrapping div that
itself is slotted in `footer-end` or `footer-start`.

<img width="439" alt="Screenshot 2024-02-27 at 12 01 36 PM"
src="https://github.com/Esri/calcite-design-system/assets/4733155/eec057d9-b6ab-45b7-bc50-b283e1f4f9d8">


The `heading` and `description` (and deprecated `title` and `subtitle`)
should keep their default text styles as these are most often text
slotted directly. In the future it might be good to make these string
properties to incentivize consistency, keeping the option to slot in
rich content like links, icons, etc., when needed.

packages/calcite-components/src/components/card/card.scss

@@ -153,12 +153,10 @@
 @include slotted("footer-start", "*") {
   @apply text-n2-wrap self-center;
   margin-inline-end: auto;
-  color: var(--calcite-color-text-3);
 }
 
 @include slotted("footer-end", "*") {
   @apply text-n2-wrap self-center;
-  color: var(--calcite-color-text-3);
 }
 
 .checkbox-wrapper-deprecated {

packages/calcite-components/src/components/card/card.stories.ts

@@ -231,6 +231,28 @@ export const deprecatedSlotsSelectable_TestOnly = (): string => html`
   </calcite-card>
 `;
 
+export const slottedFooterItems_TestOnly = (): string => html`
+  <div id="card-container" style="width:260px;">
+    <calcite-card>
+      ${thumbnailHtml}
+      <h3 slot="heading">Portland Businesses</h3>
+      <span slot="description"
+        >by
+        <calcite-link href="">example_user</calcite-link>
+      </span>
+      <div>
+        Created: Apr 22, 2019
+        <br />
+        Updated: Dec 9, 2019
+        <br />
+        View Count: 0
+      </div>
+      <calcite-chip slot="footer-start" value="calcite chip" kind="brand" icon="clock-forward">Recent</calcite-chip>
+      <calcite-chip slot="footer-end" value="calcite chip" icon="walking">Recreation</calcite-chip>
+    </calcite-card>
+  </div>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div dir="rtl" style="width:260px;">
     <calcite-card>${thumbnailHtml}${titleHtml}${footerStartTextHtml}${footerEndButtonsHtml}</calcite-card>