1 files changed, 27 insertions, 39 deletions

diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index c0e8e43..cf1c431 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -15,78 +15,66 @@
     ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
-        display:     flex;
-        align-items: flex-start;
-        gap:         fn.dim(--spacing-x);
+        display:               grid;
+        grid-template-columns: auto 1fr;
+        grid-auto-rows:        auto;
+        grid-template-areas:   'avatar bubble' 'avatar .';
+        align-items:           flex-start;
+        gap:                   fn.dim(--spacing-y) fn.dim(--spacing-x);
         
         @include iro.bem-elem('avatar') {
-            flex: 0 0 auto;
+            grid-area: avatar;
         }
         
-        @include iro.bem-elem('content') {
-            grid-column:    content;
-            display:        flex;
-            flex-direction: column;
-            min-width:      0;
-            gap:            fn.dim(--spacing-y);
+        @include iro.bem-elem('bubble') {
+            grid-column: bubble;
+            min-width:   0;
         }
         
         @include iro.bem-modifier('compact') {
-            gap: fn.dim(--compact --spacing-x);
-        
-            @include iro.bem-elem('content') {
-                gap: fn.dim(--compact --spacing-y);
-            }
+            gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
         
             @include iro.bem-modifier('left') {
-                @include iro.bem-elem('content') {
-                    align-items: flex-start;
-                }
+                justify-items: start;
             }
         
             @include iro.bem-modifier('right') {
-                @include iro.bem-elem('content') {
-                    align-items:    flex-end;
-                }
+                justify-items: end;
             }
         }
         
         @include iro.bem-modifier('right') {
-            flex-direction: row-reverse;
+            grid-template-columns: 1fr auto;
+            grid-template-areas:   'bubble avatar' '. avatar';
         }
         
         @include iro.bem-modifier('no-avatar') {
+            grid-template-columns: 1fr;
+            grid-template-areas:   'bubble';
+
             @include iro.bem-elem('avatar') {
                 display: none;
             }
         }
         
         @include iro.bem-modifier('arrow') {
-            @include iro.bem-elem('bubble') {
-                &::before {
-                    display: block;
-                }
-
-                @include iro.bem-sibling-elem('bubble') {
+            @include iro.bem-elem('avatar') {
+                @include iro.bem-next-elem('bubble') {
                     &::before {
-                        display: none;
+                        display: block;
                     }
                 }
             }
         
             @include iro.bem-modifier('right') {
-                @include iro.bem-elem('bubble') {
-                    &::before {
-                        display: none;
-                    }
+                @include iro.bem-elem('avatar') {
+                    @include iro.bem-next-elem('bubble') {
+                        &::before {
+                            display: none;
+                        }
 
-                    &::after {
-                        display: block;
-                    }
-    
-                    @include iro.bem-sibling-elem('bubble') {
                         &::after {
-                            display: none;
+                            display: block;
                         }
                     }
                 }