1 files changed, 17 insertions, 16 deletions

diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss
index a53b771..96f9060 100644
--- a/assets/css/layouts/_card-list.scss
+++ b/assets/css/layouts/_card-list.scss
@@ -1,37 +1,38 @@
-@include namespace('card-list') {
-    @include store((
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+
+@include iro.props-namespace('card-list') {
+    @include iro.props-store((
         --dims: (
-            --col-width: 17em
+            --margin-top: fn.global-dim(--size --600),
+            --spacing:    fn.global-dim(--size --200),
+            --col-width:  17em,
         )
-    ));
+    ), 'dims');
 
-    @include layout(namespace()) {
-        margin-top: $line-height * 2rem;
+    @include iro.bem-layout(iro.props-namespace()) {
+        margin-top: fn.dim(--margin-top);
         font-size:  1rem;
 
-        @include element('cards') {
+        @include iro.bem-elem('cards') {
             display:        flex;
             flex-direction: column;
             gap:            2px;
-            margin-top:     $line-height * .625rem;
+            margin-top:     fn.dim(--spacing);
 
-            @include modifier('grid', 'gallery') {
+            @include iro.bem-modifier('grid', 'gallery') {
                 display:               grid;
-                grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+                grid-template-columns: repeat(auto-fill, minmax(fn.dim(--col-width), 1fr));
                 align-items:           start;
             }
 
-            @include modifier('grid') {
+            @include iro.bem-modifier('grid') {
                 gap: 6px;
             }
 
-            @include modifier('gallery') {
+            @include iro.bem-modifier('gallery') {
                 gap: 20px;
             }
-
-            @media print {
-                filter: none;
-            }
         }
     }
 }