Fix named viewports

4 files changed, 54 insertions, 48 deletions

diff --git a/src/_config.scss b/src/_config.scss
index 26a1ad4..efb5746 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,4 +1,5 @@
 @use 'iro-sass/src/index' as iro;
+@use 'iro-sass/src/responsive' as res;
 @use 'include-media/dist/include-media' as media;
 
 iro.$vars-root-size: 16px;
@@ -6,7 +7,7 @@ iro.$vars-root-size: 16px;
 media.$breakpoints: (
     lg: 1340px,
     md: 900px,
-    sm: 600px,
+    sm: 620px,
     xs: 400px,
 );
 
@@ -17,6 +18,8 @@ media.$unit-intervals: (
     '':    0
 );
 
+res.$named-viewports: media.$breakpoints;
+
 $wanted-grays: (
     --1:  -1.2,
     --2:  -1.1,
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index ae423c1..6f52186 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -6,51 +6,50 @@
 @include iro.props-store((
     --dims: (
         --size: (
-            --0:     0,
-            --10:    iro.fn-px-to-rem(1px),
-            --25:    iro.fn-px-to-rem(2px),
-            --40:    iro.fn-px-to-rem(3px),
-            --50:    iro.fn-px-to-rem(4px),
-            --65:    iro.fn-px-to-rem(5px),
-            --75:    iro.fn-px-to-rem(6px),
-            --85:    iro.fn-px-to-rem(7px),
-            --100:   iro.fn-px-to-rem(8px),
-            --115:   iro.fn-px-to-rem(9px),
-            --125:   iro.fn-px-to-rem(10px),
-            --130:   iro.fn-px-to-rem(11px),
-            --150:   iro.fn-px-to-rem(12px),
-            --160:   iro.fn-px-to-rem(13px),
-            --175:   iro.fn-px-to-rem(14px),
-            --200:   iro.fn-px-to-rem(16px),
-            --225:   iro.fn-px-to-rem(18px),
-            --250:   iro.fn-px-to-rem(20px),
-            --275:   iro.fn-px-to-rem(22px),
-            --300:   iro.fn-px-to-rem(24px),
-            --325:   iro.fn-px-to-rem(26px),
-            --400:   iro.fn-px-to-rem(32px),
-            --450:   iro.fn-px-to-rem(36px),
-            --500:   iro.fn-px-to-rem(40px),
-            --550:   iro.fn-px-to-rem(44px),
-            --600:   iro.fn-px-to-rem(48px),
-            --700:   iro.fn-px-to-rem(56px),
-            --800:   iro.fn-px-to-rem(64px),
-            --900:   iro.fn-px-to-rem(72px),
-            --1000:  iro.fn-px-to-rem(80px),
-            --1200:  iro.fn-px-to-rem(96px),
-            --1700:  iro.fn-px-to-rem(136px),
-            --2400:  iro.fn-px-to-rem(192px),
-            --2500:  iro.fn-px-to-rem(200px),
-            --2600:  iro.fn-px-to-rem(208px),
-            --2800:  iro.fn-px-to-rem(224px),
-            --3200:  iro.fn-px-to-rem(256px),
-            --3400:  iro.fn-px-to-rem(272px),
-            --3500:  iro.fn-px-to-rem(280px),
-            --3600:  iro.fn-px-to-rem(288px),
-            --3800:  iro.fn-px-to-rem(304px),
-            --4600:  iro.fn-px-to-rem(368px),
-            --5000:  iro.fn-px-to-rem(400px),
-            --6000:  iro.fn-px-to-rem(480px),
-            --16000: iro.fn-px-to-rem(1280px),
+            --0:    0,
+            --10:   iro.fn-px-to-rem(1px),
+            --25:   iro.fn-px-to-rem(2px),
+            --40:   iro.fn-px-to-rem(3px),
+            --50:   iro.fn-px-to-rem(4px),
+            --65:   iro.fn-px-to-rem(5px),
+            --75:   iro.fn-px-to-rem(6px),
+            --85:   iro.fn-px-to-rem(7px),
+            --100:  iro.fn-px-to-rem(8px),
+            --115:  iro.fn-px-to-rem(9px),
+            --125:  iro.fn-px-to-rem(10px),
+            --130:  iro.fn-px-to-rem(11px),
+            --150:  iro.fn-px-to-rem(12px),
+            --160:  iro.fn-px-to-rem(13px),
+            --175:  iro.fn-px-to-rem(14px),
+            --200:  iro.fn-px-to-rem(16px),
+            --225:  iro.fn-px-to-rem(18px),
+            --250:  iro.fn-px-to-rem(20px),
+            --275:  iro.fn-px-to-rem(22px),
+            --300:  iro.fn-px-to-rem(24px),
+            --325:  iro.fn-px-to-rem(26px),
+            --400:  iro.fn-px-to-rem(32px),
+            --450:  iro.fn-px-to-rem(36px),
+            --500:  iro.fn-px-to-rem(40px),
+            --550:  iro.fn-px-to-rem(44px),
+            --600:  iro.fn-px-to-rem(48px),
+            --700:  iro.fn-px-to-rem(56px),
+            --800:  iro.fn-px-to-rem(64px),
+            --900:  iro.fn-px-to-rem(72px),
+            --1000: iro.fn-px-to-rem(80px),
+            --1200: iro.fn-px-to-rem(96px),
+            --1700: iro.fn-px-to-rem(136px),
+            --2400: iro.fn-px-to-rem(192px),
+            --2500: iro.fn-px-to-rem(200px),
+            --2600: iro.fn-px-to-rem(208px),
+            --2800: iro.fn-px-to-rem(224px),
+            --3200: iro.fn-px-to-rem(256px),
+            --3400: iro.fn-px-to-rem(272px),
+            --3500: iro.fn-px-to-rem(280px),
+            --3600: iro.fn-px-to-rem(288px),
+            --3800: iro.fn-px-to-rem(304px),
+            --4600: iro.fn-px-to-rem(368px),
+            --5000: iro.fn-px-to-rem(400px),
+            --6000: iro.fn-px-to-rem(480px),
         ),
 
         --font: (
diff --git a/src/_utils.scss b/src/_utils.scss
index a20bde3..50c67e1 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -14,6 +14,10 @@ $dirs: (
     display: block;
 }
 
+@include iro.bem-utility('d-inline-block') {
+    display: inline-block;
+}
+
 @include iro.bem-utility('d-contents') {
     display: contents;
 }
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 42d1281..52acfb8 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -4,8 +4,8 @@
 @include iro.props-namespace('container') {
     @include iro.props-store((
         --dims: (
-            --width:    iro.fn-px-to-rem(700px),
-            --width-50: iro.fn-px-to-rem(360px),
+            --width:    iro.fn-px-to-rem(620px),
+            --width-50: iro.fn-px-to-rem(320px),
             --pad-x:    fn.global-dim(--size --400),
             --pad-y:    fn.global-dim(--size --800),
         )