chore: update images styles

3 files changed, 35 insertions, 16 deletions

diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
index 04acad9..a5299fe 100644
--- a/src/styles/pages/article.module.scss
+++ b/src/styles/pages/article.module.scss
@@ -11,7 +11,7 @@
   margin-right: var(--spacing-2xs);
   padding: var(--spacing-2xs) var(--spacing-xs);
 
-  &__icon {
+  figure {
     max-width: fun.convert-px(22);
     margin-right: var(--spacing-2xs);
   }
diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss
index 8359881..0cd3654 100644
--- a/src/styles/pages/partials/_article-media.scss
+++ b/src/styles/pages/partials/_article-media.scss
@@ -1,11 +1,20 @@
+@use "@styles/abstracts/functions" as fun;
+
 @mixin styles {
   figure {
-    margin: var(--spacing-md) 0;
+    display: flex;
+    flex-flow: column;
+    width: fit-content;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
   }
 
   figcaption {
-    margin-top: var(--spacing-xs);
-    font-size: var(--font-size-sm);
-    text-align: center;
+    margin: 0;
+    padding: fun.convert-px(4) var(--spacing-2xs);
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(1) solid var(--color-border-light);
+    font-weight: 500;
   }
 }
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index f75a4d5..33e59a1 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -62,6 +62,24 @@
     }
   }
 
+  .wp-block-image {
+    display: flex;
+    flex-flow: column;
+    width: fit-content;
+    margin: 0 auto;
+    padding: fun.convert-px(4);
+    position: relative;
+    border: fun.convert-px(1) solid var(--color-border);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+      var(--color-shadow);
+    text-align: center;
+
+    figcaption {
+      margin-top: fun.convert-px(4);
+      font-size: var(--font-size-sm);
+    }
+  }
+
   .wp-block-gallery {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
@@ -142,18 +160,10 @@
         }
       }
     }
-  }
 
-  .wp-block-image {
-    img {
-      display: block;
-      margin: auto;
-      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-          var(--color-shadow-light),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-          var(--color-shadow-light);
-      text-align: center;
+    .wp-block-image img {
+      height: 100%;
+      object-fit: cover;
     }
   }