Location of reference/license info makes it hard to see figure caption text

[kphunter]

IMHO, it's difficult to see the figure caption text when it is positioned above <figcaption> text:

Given that HTML5 spec stipulates that <figcaption>s should be either the very first element or the very last element within a <figure> element, I propose we move the <footer><small> block into the very end of the <figcaption> (prepend </figcaption> with the license/reference content) like:

<figure class="image"><img src="assets/6.jpeg" alt="">
  <figcaption>
    <p>Peripheral Edema</p>
    <footer><small>Reference: James Heilman. (2018, May 14). Pitting edema during and after the application of pressure to the skin [Online image]. Retrieved from <a href="https://en.wikipedia.org/wiki/Edema">https://en.wikipedia.org/wiki/Edema</a></small></footer>
 </figcaption>
</figure>

so that it might look like this:

We will also need to double-check that Sugar Suite .reference/.license styling isn't overwritten by .figcaption styling.

[kphunter]

Another example of a hard-to-read caption (because of reference/license text):