diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index eef90e0..bda52b3 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -2,7 +2,7 @@
 {{ $name_splitted := split $img.RelPermalink "." }}
 {{ $name_base := index $name_splitted 0 }}
 {{ $ext_base := index $name_splitted 1 }}
-<figure {{ with .Get "class" }} class="{{ . }}"{{ end }}>
+<figure {{ with .Get "id" }} id="{{ . }}"{{ end }}{{ with .Get "class" }} class="{{ . }}"{{ end }}>
 	{{ with .Get "link" }}
 		<a href="{{ . | absURL }}">
 	{{ else }}
diff --git a/static/css/style.css b/static/css/style.css
index 8ab7224..4f1ea68 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -544,11 +544,6 @@ a.not(.anchor):focus {
 	width: fit-content;
 	overflow: visible;
 }
-.article-body figure picture,
-.article-body figure figcaption {
-	display: table-row;
-	border-spacing: 0;
-}
 .article-body figure img {
 	vertical-align: middle;
 	min-width: calc(50% - 2 * var(--image-margin-side));
@@ -606,9 +601,11 @@ a.not(.anchor):focus {
 }
 .article-body figure>a {
 	display: block;
+	width: fit-content;
 	outline: none;
 	min-height: 100%;
 	border: none;
+	margin: auto;
 	margin-bottom: 0.3em;
 }
 .article-body figure>a:hover {
@@ -629,6 +626,8 @@ a.not(.anchor):focus {
 }
 .article-body figure figcaption .attribution {
 	float: right;
+	margin-left: 1em;
+	margin-top: 1em;
 }
 @media only screen and (max-width: 320px) {
 	.article-body .footnotes ol {
@@ -752,6 +751,7 @@ details[open] summary:hover {
 	vertical-align: top;
 	position: relative;
 	top: -0.5rem;
+	font-size: 0.6em;
 }
 
 /******************* Article Blockquote *******************/