3 files changed, 22 insertions, 12 deletions

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index 93db12f..f06dc4a 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -25,15 +25,3 @@ img {
     display:   block;
     max-width: 100%;
 }
-
-figure {
-    margin:  fn.dim(--paragraph --margin-top) 0 0;
-    padding: 0;
-
-    img {
-        display:    block;
-        max-width:  100%;
-        max-height: 70vh;
-        object-fit: contain;
-    }
-}
diff --git a/assets/css/components/_figure.scss b/assets/css/components/_figure.scss
new file mode 100644
index 0000000..78e13c0
--- /dev/null
+++ b/assets/css/components/_figure.scss
@@ -0,0 +1,21 @@
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use 'iro-design/src/mixins' as mx;
+@use '../functions' as fn2;
+
+@include iro.props-namespace('figure') {
+    @include iro.bem-component(iro.props-namespace()) {
+        margin:  fn.global-dim(--paragraph --margin-top) 0 0;
+        padding: 0;
+
+        @include iro.bem-elem('link') {
+            display: block;
+        }
+
+        @include iro.bem-elem('image') {
+            display:    block;
+            max-width:  100%;
+            max-height: 70vh;
+        }
+    }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
index b525e7b..9ec6483 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -21,6 +21,7 @@
 @use 'components/header';
 @use 'components/hnav';
 @use 'components/card';
+@use 'components/figure';
 
 @use 'iro-design/src/scopes/blockquotes' as iro-blockquotes;
 @use 'iro-design/src/scopes/code' as iro-code;