4 files changed, 34 insertions, 2 deletions

diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 61f3cda..d276d33 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -54,6 +54,10 @@
             gap: 0;
         }
 
+        @include iro.bem-modifier('wrap') {
+            flex-wrap: wrap;
+        }
+
         @include iro.bem-elem('block') {
             flex: 0 0 auto;
 
diff --git a/src/objects/_list-group.scss b/src/objects/_list-group.scss
index 1093ad8..d46722e 100644
--- a/src/objects/_list-group.scss
+++ b/src/objects/_list-group.scss
@@ -28,7 +28,9 @@
             padding: fn.dim(--pad-y) fn.dim(--pad-x);
 
             @include iro.bem-next-twin-elem {
-                border-top: 1px solid fn.color(--border);
+                border-width: 1px 0 0;
+                border-style: solid;
+                border-color: fn.color(--border);
             }
 
             @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
@@ -41,5 +43,18 @@
                 }
             }
         }
+
+        @include iro.bem-modifier('horizontal') {
+            display: flex;
+
+            @include iro.bem-elem('item') {
+                flex: 1 0 auto;
+
+                @include iro.bem-next-twin-elem {
+                    border-top-width:  0;
+                    border-left-width: 1px;
+                }
+            }
+        }
     }
 }
diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug
index ad3c212..e9db236 100644
--- a/tpl/objects/list-group.pug
+++ b/tpl/objects/list-group.pug
@@ -1,5 +1,11 @@
 mixin list-group
-    .o-list-group
+    -
+        let classes = {
+            'o-list-group':             true,
+            'o-list-group--horizontal': attributes.horizontal,
+        }
+
+    div(class=classes)
         block
 
 mixin list-group-item
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug
index 9acef31..9c6b132 100644
--- a/tpl/views/list-group.pug
+++ b/tpl/views/list-group.pug
@@ -13,3 +13,10 @@ mixin view-list-group
                 +list-group-item(interactive=true)= 'Second item'
                 +list-group-item(interactive=true)= 'Third item'
                 +list-group-item(interactive=true)= 'Fourth item'
+
+        .c-box
+            +list-group(horizontal=true)
+                +list-group-item(interactive=true)= 'First item'
+                +list-group-item(interactive=true)= 'Second item'
+                +list-group-item(interactive=true)= 'Third item'
+                +list-group-item(interactive=true)= 'Fourth item'