style(layout): adjust grid and card spacing variables

- reduce card gap from 2rem to 1.5rem for better content density
- increase grid gap from 1.5rem to 1.75rem for improved layout spacing
- replace data-flex-grid with data-flex in card stories
- add new data-flex alignment modifiers (start/end)
- remove redundant media query for flex justify-content

libs/react/fpkit/src/components/cards/card.scss

@@ -6,7 +6,7 @@
   --card-position: relative;
   --card-display: flex;
   --card-direction: column;
-  --card-gap: 2rem;
+  --card-gap: 1.5rem;
   --card-w: 33%;
 }
 [data-card],

libs/react/fpkit/src/components/cards/card.stories.tsx

@@ -82,7 +82,7 @@ export const FlexibleContent: Story = {
     },
   },
   render: (args) => (
-    <div data-flex-grid>
+    <div data-flex>
       <Card {...args}>
         <Card.Title>Card Title</Card.Title>
         <Card.Content>

libs/react/fpkit/src/sass/_grid.scss

@@ -1,5 +1,5 @@
 :root {
-  --gap: 1.5rem;
+  --gap: 1.75rem;
 }
 
 [data-grid] {
@@ -28,9 +28,17 @@
   margin-inline: auto;
   justify-content: center;
   gap: var(--gap);
-  @media screen and (max-width: 1080px) {
-    justify-content: center;
-  }
+  // @media screen and (max-width: 1080px) {
+  //   justify-content: center;
+  // }
+}
+
+[data-flex~='start'] {
+  justify-content: start;
+}
+
+[data-flex~='end'] {
+  justify-content: end;
 }
 
 [data-flex-grid] {