Changed bubble group spacing implementation

1 files changed, 12 insertions, 2 deletions

diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index b4062a1..fc861aa 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -20,7 +20,7 @@
         grid-auto-rows:        auto;
         grid-template-areas:   'avatar bubble' 'avatar .';
         align-items:           flex-start;
-        gap:                   fn.dim(--spacing-y) fn.dim(--spacing-x);
+        gap:                   0 fn.dim(--spacing-x);
         
         @include iro.bem-elem('avatar') {
             grid-area: avatar;
@@ -31,10 +31,14 @@
             box-sizing:  border-box;
             min-width:   0;
             max-width:   100%;
+
+            @include iro.bem-next-twin-elem {
+                margin-top: fn.dim(--spacing-y);
+            }
         }
         
         @include iro.bem-modifier('compact') {
-            gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
+            gap: 0 fn.dim(--compact --spacing-x);
         
             @include iro.bem-modifier('left') {
                 justify-items: start;
@@ -43,6 +47,12 @@
             @include iro.bem-modifier('right') {
                 justify-items: end;
             }
+        
+            @include iro.bem-elem('bubble') {
+                @include iro.bem-next-twin-elem {
+                    margin-top: fn.dim(--compact --spacing-y);
+                }
+            }
         }
         
         @include iro.bem-modifier('right') {