Responsive images and proper styling for images with caption

assets/css/main.css

@@ -40,6 +40,42 @@ a {
   text-decoration: none;
 }
 
+/* Media */
+
+img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+figure {
+  display: inline-block;
+  margin: 2rem auto;
+  text-align: center;
+  max-width: 100%;
+}
+
+figure img {
+  max-width: 100%;
+  height: auto;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+figcaption {
+  margin-top: 0.75rem;
+  font-size: 0.95rem;
+  color: var(--text-highlight-secondary);
+  font-style: italic;
+  line-height: 1.4;
+}
+
+.center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: fit-content;
+}
+
 /* Menubar */
 
 nav {

content/theme_overview.md

@@ -53,6 +53,8 @@ draft = false
 
 ![Sample Image](https://placehold.co/600x400)
 
+{{< figure src="https://placehold.co/300x200" caption="This is an image with a caption. I'm centered :)" class="center" >}}
+
 ---
 
 ## Code Blocks