add separate story files

addons/rose/addon/components/rose/form/radio/radio-card/tile/index.stories.mdx

@@ -2,57 +2,11 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
 import { text, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Rose|Form/Radio/Radio/RadioCard" component="Form/Radio/Radio/RadioCard" />
+<Meta title="Rose|Form/Radio/Radio/RadioCard/Tile" component="Form/Radio/Radio/RadioCard/Tile" />
 
-# Form Radiofield
-
-Renders a form radiofield.
-
-```htmlbars
-<Rose::Form::Radio::RadioCard::Wide
-  @label="Yes"
-  @error={{false}}
-  @value="yes-agree"
-  @selectedValue="yes-agree"
-  @disabled={{false}}
-  @changed={{fn}}
-  />
-```
-
-<Preview>
-  <Story name="Wide" height="10rem">{{
-    template: hbs`
-      <Rose::Form::Radio::RadioCard::Wide
-        @label={{label}}
-        @error={{error}}
-        @value={{value}}
-        @selectedValue={{selectedValue}}
-        @disabled={{disabled}}
-        @icon={{icon}}
-        />
-    `,
-    context: {
-      label: text('text', 'AWS'),
-      error: boolean('error', false),
-      value: text('value', 'value and selectedValue must match to select radiofield'),
-      selectedValue: text(
-        'selectedValue',
-        'value and selectedValue must match to select radiofield'
-      ),
-      disabled: boolean('disabled', false),
-      icon: select(
-        'icon',
-        {
-          'none': null,
-          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
-          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
-        },
-        null
-      ),
-    }
-  }}</Story>
-</Preview>
+# Form RadioCard field in tile format
 
+Renders a form radioCard field in a tile format.
 
 ```htmlbars
 <Rose::Form::Radio::RadioCard::Tile

addons/rose/addon/components/rose/form/radio/radio-card/wide/index.stories.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Radio/Radio/RadioCard/Wide" component="Form/Radio/Radio/RadioCard/Wide" />
+
+# Form Radiofield in a wide format
+
+Renders a form radiofield in a Wide format.
+
+```htmlbars
+<Rose::Form::Radio::RadioCard::Wide
+  @label="Yes"
+  @error={{false}}
+  @value="yes-agree"
+  @selectedValue="yes-agree"
+  @disabled={{false}}
+  @changed={{fn}}
+  />
+```
+
+<Preview>
+  <Story name="Wide" height="10rem">{{
+    template: hbs`
+      <Rose::Form::Radio::RadioCard::Wide
+        @label={{label}}
+        @error={{error}}
+        @value={{value}}
+        @selectedValue={{selectedValue}}
+        @disabled={{disabled}}
+        @icon={{icon}}
+        />
+    `,
+    context: {
+      label: text('text', 'AWS'),
+      error: boolean('error', false),
+      value: text('value', 'value and selectedValue must match to select radiofield'),
+      selectedValue: text(
+        'selectedValue',
+        'value and selectedValue must match to select radiofield'
+      ),
+      disabled: boolean('disabled', false),
+      icon: select(
+        'icon',
+        {
+          'none': null,
+          'flight-icons/svg/org-16': 'flight-icons/svg/org-16',
+          'flight-icons/svg/clipboard-copy-16': 'flight-icons/svg/clipboard-copy-16',
+        },
+        null
+      ),
+    }
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/form/_radioCard.scss

@@ -1,11 +1,12 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+//sizing 
 .rose-form-radio-card-wide {
   position: relative;
   display: flex;
   align-items: center;
-  width: 350px;
+  width: (sizing.rems(m)) * 20;
   justify-content: center;
 
   .radio-card-overlay {