2 files changed, 129 insertions, 0 deletions

diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
new file mode 100644
index 0000000..f6b6b03
--- /dev/null
+++ b/src/layouts/_card.scss
@@ -0,0 +1,38 @@
+@include namespace('card') {
+    @include store((
+        --dims: (
+            --pad-x: iro-px-to-rem(11px),
+            --pad-y: iro-px-to-rem(8px),
+            --lg: (
+                --pad-x: iro-px-to-rem(14px),
+                --pad-y: iro-px-to-rem(11px),
+            )
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:     flex;
+        align-items: center;
+        padding:     prop(--dims --pad-y) prop(--dims --pad-x);
+        gap:         prop(--dims --pad-x);
+        line-height: 1.4;
+
+        @include modifier('lg') {
+            padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x);
+            gap:     prop(--dims --lg --pad-x);
+        }
+
+        @include modifier('flush') {
+            padding: 0;
+        }
+
+        @include element('block') {
+            flex: 0 0 auto;
+
+            @include modifier('main') {
+                flex-shrink: 1;
+                width:       100%;
+            }
+        }
+    }
+}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
new file mode 100644
index 0000000..efe5203
--- /dev/null
+++ b/src/layouts/_container.scss
@@ -0,0 +1,91 @@
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('container') {
+    @include iro.props-store((
+        --dims: (
+            --content-width:     iro.fn-px-to-rem(700px),
+            --sm-content-width:  iro.fn-px-to-rem(360px),
+            --padding-x:         3rem,
+            --padding-y:         3rem,
+            --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true),
+        )
+    ));
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        overflow: hidden;
+
+        @include iro.bem-elem('inner') {
+            margin-top:    calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
+            margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
+
+            &::before,
+            &::after {
+                content: '';
+                display: block;
+                width:   0;
+                height:  0;
+            }
+
+            &::before {
+                margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true);
+            }
+
+            &::after {
+                margin-top: iro.props-get(--dims --spacing --y --xl, $global: true);
+            }
+        }
+
+        @include iro.bem-modifier('pad-x') {
+            padding-right: iro.props-get(--dims --padding-x);
+            padding-left:  iro.props-get(--dims --padding-x);
+        }
+
+        @include iro.bem-modifier('pad-y') {
+            padding-top:    iro.props-get(--dims --padding-y);
+            padding-bottom: iro.props-get(--dims --padding-y);
+        }
+
+        @include iro.bem-modifier('narrow') {
+            max-width:    iro.props-get(--dims --content-width);
+            margin-right: auto;
+            margin-left:  auto;
+
+            @each $breakpoint in map-keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include iro.bem-suffix('#{$breakpoint}-down') {
+                        max-width:    iro.props-get(--dims --content-width);
+                        margin-right: auto;
+                        margin-left:  auto;
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('sm-narrow') {
+            max-width:    iro.props-get(--dims --sm-content-width);
+            margin-right: auto;
+            margin-left:  auto;
+
+            @each $breakpoint in map-keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include iro.bem-suffix('#{$breakpoint}-down') {
+                        max-width:    iro.props-get(--dims --sm-content-width);
+                        margin-right: auto;
+                        margin-left:  auto;
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('themed') {
+            background-color: iro.props-get(--colors --bg, $global: true);
+            color:            iro.props-get(--colors --fg, $global: true);
+        }
+
+        @include iro.bem-modifier('in-page') {
+            margin-top:    iro.props-get(--dims --in-page-spacing-y);
+            margin-bottom: iro.props-get(--dims --in-page-spacing-y);
+        }
+    }
+}