Image improved

pages/[...slug].tsx

@@ -130,17 +130,16 @@ const Index: NextPage<Props> = props => (
 
                         case 'image':
                             return (
-                                <div key={i} className="kazimir__image">
-                                    <figure>
-                                        <Image
-                                            src={x.data.src}
-                                            alt={x.data.alt}
-                                            width={x.data.width}
-                                            height={x.data.height}
-                                        />
-                                        <figcaption>{x.data.caption}</figcaption>
-                                    </figure>
-                                </div>
+                                <figure key={i} className="kazimir__image">
+                                    <Image
+                                        src={x.data.src}
+                                        alt={x.data.alt}
+                                        width={x.data.width}
+                                        height={x.data.height}
+                                        layout={'responsive'}
+                                    />
+                                    <figcaption>{x.data.caption}</figcaption>
+                                </figure>
                             )
 
                         case 'file':

src/style/kazimir/image.css

@@ -1,8 +1,8 @@
 .kazimir__image {
-    position: relative;
-    width: calc(100% + var(--kazimir-image-increase));
-    margin-left: calc(-0.5 * var(--kazimir-image-increase));
-    margin-bottom: var(--size-m);
+    /* position: relative; */
+    /* width: calc(100% + var(--kazimir-image-increase)); */
+    /* margin-left: calc(-0.5 * var(--kazimir-image-increase)); */
+    margin-bottom: var(--size-l);
 }
 
 .kazimir__image p {
@@ -10,7 +10,7 @@
 }
 
 .kazimir__image img {
-    border-radius: var(--kazimir-radius);
+    border-radius: var(--radius);
 
     max-width: 100%;
     max-height: 35em;
@@ -21,4 +21,6 @@
     font-size: var(--font-size-second);
     font-style: italic;
     font-weight: 100;
+    padding-top: var(--size-s);
+    padding-left: var(--size-s);
 }

src/style/style.css

@@ -53,7 +53,6 @@
 
     /* KAZIMIR */
     --kazimir-caption-margin: 0px;
-    --kazimir-radius: 10px;
     --kazimir-image-increase: 50px;
 }