diff --git a/public/example-image.jpg b/public/example-image.jpg
new file mode 100644
index 0000000..f99ab10
Binary files /dev/null and b/public/example-image.jpg differ
diff --git a/public/index.md b/public/index.md
index 60d2400..5c10caa 100644
--- a/public/index.md
+++ b/public/index.md
@@ -84,6 +84,8 @@ All are optional.
 
 ## Content
 
+![Example image with caption.](/example-image.jpg#right;w=40%;my-class)
+
 Content is provided as simple static  markdown files, with optional YAML
 [frontmatter](#yaml-frontmatter). It should be present on the webserver at the
 request path, with a `.md` file extension.
@@ -103,7 +105,7 @@ discarded.
 
     ![Image caption](/url/of/image.jpg#right;w=50%;my-class)
 
-The above example will display a right-floated figure, 50% wide, with the class
+The above example will display a right-floated figure, 40% wide, with the class
 `my-class`.
 
 | Key     | Description             |
diff --git a/public/template/main.css b/public/template/main.css
index e2c15f5..c9e3d73 100644
--- a/public/template/main.css
+++ b/public/template/main.css
@@ -115,3 +115,31 @@ td:first-child, th:first-child {
 tr:nth-child(2n+1) td {
     background: #EEE;
 }
+
+p {
+    margin: 0 0 10px 0;
+}
+
+p::before {
+    content: "";
+    display: block;
+    overflow: hidden;
+    width: 200px;
+}
+
+figure.my-class {
+    margin: 0 0 10px 20px;
+}
+
+figcaption {
+    font-style: italic;
+}
+
+@media(max-width: 500px) {
+    figure.my-class { min-width: 190px; }
+    p::before { width: 150px; }
+}
+
+@media(max-width: 400px) {
+    figure.my-class { min-width: 150px; }
+}