Make images responsive

Adjust the images size on smaller viewports by setting max-width to
100%.

Preserve the 640px maximum width by setting it on the parent div
element

Set symmetrical horizontal margins to always keep the images in the
center.

Remove the horizontal margin on small viewports to make the images
bigger.

Author: atw

html/css/ejs.css

@@ -347,9 +347,19 @@ blockquote footer:before {
 }
 
 
-div.image img {
+div.image {
   max-width: 640px;
-  margin-left: 30px;
+  margin: 0 30px;
+}
+
+@media screen and (max-width: 500px) {
+  div.image {
+    margin: 0;
+  }
+}
+
+div.image img {
+  max-width: 100%;
 }
 
 div.solution:before {