Added field-label

1 files changed, 14 insertions, 11 deletions

diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index f6b6b03..037b29f 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -1,35 +1,38 @@
-@include namespace('card') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('card') {
+    @include iro.props-store((
         --dims: (
-            --pad-x: iro-px-to-rem(11px),
-            --pad-y: iro-px-to-rem(8px),
+            --pad-x: iro.fn-px-to-rem(11px),
+            --pad-y: iro.fn-px-to-rem(8px),
             --lg: (
-                --pad-x: iro-px-to-rem(14px),
-                --pad-y: iro-px-to-rem(11px),
+                --pad-x: iro.fn-px-to-rem(14px),
+                --pad-y: iro.fn-px-to-rem(11px),
             )
         )
     ));
 
-    @include layout(namespace()) {
+    @include iro.bem-layout(iro.props-namespace()) {
         display:     flex;
         align-items: center;
         padding:     prop(--dims --pad-y) prop(--dims --pad-x);
         gap:         prop(--dims --pad-x);
         line-height: 1.4;
 
-        @include modifier('lg') {
+        @include iro.bem-modifier('lg') {
             padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x);
             gap:     prop(--dims --lg --pad-x);
         }
 
-        @include modifier('flush') {
+        @include iro.bem-modifier('flush') {
             padding: 0;
         }
 
-        @include element('block') {
+        @include iro.bem-elem('block') {
             flex: 0 0 auto;
 
-            @include modifier('main') {
+            @include iro.bem-modifier('main') {
                 flex-shrink: 1;
                 width:       100%;
             }