Adjust row-gap for image cards (#1417)

## Make row-gap in horizontal image cards match layout row-gap

Use the newly added layout-gap-x in horizontal `<Card>` components that
contains `<Media>`, keep the same gap for other horizontal `<Card>`
components:




https://github.com/user-attachments/assets/009ebb0e-b96c-4bcd-879d-d18483d1f5ab

Author: oscarcarlstrom

.changeset/grumpy-rice-mate.md

@@ -0,0 +1,5 @@
+---
+"@obosbbl/grunnmuren-react": patch
+---
+
+Adjust `row-gap` in horizontal `<Card>` with `<Media>` to match layout grid.

packages/react/src/card/card.tsx

@@ -91,7 +91,9 @@ const cardVariants = cva({
         '[&_[data-slot="media"]]:rounded-t-2xl', // Both Top corners are rounded
       ],
       horizontal: [
-        'gap-x-4', // Since this does not affect the layout before the flex direction is set (at breakpoint @2xl for Card with Media), we can set it here
+        // Use more gap for horizontal cards that have media
+        // Since this does not affect the layout before the flex direction is set (at breakpoint @2xl for Card with Media), we can set it here
+        'has-data-[slot=media]:layout-gap-x not-has-data-[slot=media]:gap-x-4',
         // **** With Media ****
         '[&:has(>[data-slot="media"]:last-child)]:flex-col-reverse', // Always display the media at the top of the card
         'has-data-[slot=media]:@2xl:!flex-row', // We need !important to override the specificity (first-/last-child) of the flex-col-reverse and flex-col classes