* Add in SVG of Chicago city flag

* Fiddle with CSS some more to work with narrower viewports

index.html

@@ -44,7 +44,18 @@
             background-position: -100%
         }
 
-        @media screen and (max-width: 900px) {
+        figure {
+            float: right;
+            width: 50%;
+            text-align: center;
+            font-style: italic;
+            margin: 38px 40px;
+        }
+        figure div {
+            width: 100%;
+        }
+
+        @media screen and (max-width: 690px) {
             div {
                 width: initial;
             }
@@ -56,6 +67,11 @@
             p {
                 font-size: 1.3em;
             }
+
+            figure {
+                float: none;
+                width: initial;
+            }
         }
     </style>
 </head>
@@ -171,6 +187,10 @@
             <span data-cue-position="93">across </span>
             <span data-cue-position="94">the middle. </span>
         </p>
+        <figure>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 480"><path d="M0 0h720v480H0z" fill="#fff"></path><path d="M150 180l11 41 41-11 -30 30 30 30 -41-11 -11 41 -11-41 -41 11 30-30 -30-30 41 11zM290 180l11 41 41-11 -30 30 30 30 -41-11 -11 41 -11-41 -41 11 30-30 -30-30 41 11zM430 180l11 41 41-11 -30 30 30 30 -41-11 -11 41 -11-41 -41 11 30-30 -30-30 41 11zM570 180l11 41 41-11 -30 30 30 30 -41-11 -11 41 -11-41 -41 11 30-30 -30-30 41 11z" fill="#f00"></path><path d="M0 80h720v80H0v160h720v80H0z" fill="#b3ddf2"></path></svg>
+                <figcaption>Figure 1. Flag of Chicago, Illinois. <a href="https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg">Source: Wikipedia</a></figcaption>
+        </figure>
         <h1>
             <span data-cue-position="95">Number </span>
             <span data-cue-position="96">two: </span>