Improved form

1 files changed, 21 insertions, 23 deletions

diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 9e6520f..3c7edcb 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -10,22 +10,29 @@
     ));
 
     @include iro.bem-layout(iro.props-namespace()) {
-        display:               grid;
-        grid-template-columns: auto 1fr;
-        grid-template-rows:    auto;
-        align-items:           baseline;
-        gap:                   iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
+        display:        flex;
+        flex-direction: column;
+        align-items:    baseline;
+        gap:            iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
     
-        @include iro.bem-elem('item') {
-            display: contents;
-        }
-    
-        @include iro.bem-elem('item-label') {
-            grid-column: 1;
-        }
+        @include iro.bem-modifier('labels-left', 'labels-right') {
+            display:               grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows:    auto;
     
-        @include iro.bem-elem('item-content') {
-            grid-column: 2;
+            @include iro.bem-elem('item') {
+                display: contents;
+            }
+        
+            @include iro.bem-elem('item-label') {
+                grid-column:   1;
+                padding-right: 0;
+            }
+        
+            @include iro.bem-elem('item-content') {
+                grid-column: 2;
+                margin-top:  0;
+            }
         }
     
         @include iro.bem-modifier('labels-right') {
@@ -33,14 +40,5 @@
                 text-align: right;
             }
         }
-    
-        @include iro.bem-modifier('labels-above') {
-            display:        flex;
-            flex-direction: column;
-    
-            @include iro.bem-elem('item') {
-                display: block;
-            }
-        }
     }
 }