2 files changed, 62 insertions, 0 deletions

diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
new file mode 100644
index 0000000..eac739f
--- /dev/null
+++ b/src/layouts/_split-view.scss
@@ -0,0 +1,54 @@
+@use 'sass:meta';
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'split-view.vars';
+@use 'split-view.vars' as vars;
+
+@include bem.layout('split-view') {
+    display: flex;
+    gap: props.get(vars.$col-gap);
+    align-items: start;
+
+    @include bem.elem('panel') {
+        flex: 1 1 auto;
+        inline-size: 100%;
+        min-inline-size: 0;
+
+        @include bem.modifier('side-25') {
+            flex: 0 0 auto;
+            inline-size: 25%;
+            min-inline-size: props.get(vars.$panel--side-25--min);
+        }
+
+        @include bem.modifier('sticky') {
+            position: sticky;
+            inset-block-start: props.get(vars.$panel--sticky--inset);
+        }
+    }
+
+    @include bem.elem('content') {
+        inline-size: 100%;
+    }
+
+    @include media.media('<=md') {
+        flex-direction: column;
+        gap:            props.get(vars.$row-gap);
+        align-items:    stretch;
+
+        @include bem.elem('panel') {
+            flex: 1 1 auto;
+
+            @include bem.modifier('side-25') {
+                inline-size: auto;
+                min-inline-size: 0;
+            }
+
+            @include bem.modifier('sticky') {
+                position: static;
+            }
+        }
+    }
+}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
new file mode 100644
index 0000000..581bba3
--- /dev/null
+++ b/src/layouts/_split-view.vars.scss
@@ -0,0 +1,8 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
+$row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
+
+$panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
+$panel--sticky--inset: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--400)) !default;