Correctly include poem class on poem layout

BackstopJS is already paying off big time here, because without it I
might not have caught this little subtle issue.

While the `poem.html` layout used `poetry` as its container class, the
CSS referenced a `poem` class (which fits with narrative and drama using
their same file names as the container class).

However, because `div.poem` did not exist, the margin set on the bottom
of poems was never applied. That is now fixed, which is why the
reference images are updated with this commit.

(That said, the margins are collapsing in a way the original author of
the CSS likely did not intend, but that's a fix for another day.)

To preserve backward-compatibility, I have added the `poem` class to the
existing `poetry` class in the poem template. I have also updated the
CSS to account for the use of either `poem` or `poetry` as the container
class names.

Author: karlstolley

_layouts/poem.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-<article class="poetry">
+<article class="poem poetry">
   <h1 class="text-title">{{ page.title }}</h1>
   <p class="byline">{{ page.author }}</p>
   {{ content }}

_sass/_ed.scss

@@ -664,6 +664,7 @@ p.small {
 }
 
 div.poem,
+.poem,
 div.narrative,
 .narrative {
   margin-bottom: 5rem;
@@ -681,6 +682,7 @@ div.toc {
   want you want to remove the hanging indent, reset the padding-left to 0 and erase text-indent
 */
 
+.poem ul,
 .poetry ul,
 ul.poetry {
   list-style: none;
@@ -751,6 +753,7 @@ ul.poetry {
   padding-left: 10rem;
 }
 
+.poem .byline,
 .poetry .byline {
   font-style: italic;
   font-weight: 300;