Improve display of screenshots

Also ensure figcaption uses similar design to that in the NHS design system

Author: paulrobertlloyd

app/_components/screenshots/_screenshots.scss

@@ -1,6 +1,6 @@
 .app-screenshots__contents,
 .app-screenshots__screenshot {
-  margin-bottom: govuk-spacing(9);
+  margin-bottom: govuk-spacing(9) !important;
 }
 
 @include govuk-media-query($media-type: print) {

app/_components/screenshots/template.njk

@@ -19,10 +19,10 @@
   {%- set itemId = item.id or (itemTitle | slugify) -%}
   {%- set file = item.src or (itemId + ".png") -%}
   {%- set alt = item.alt or ("Screenshot of " + itemTitle) -%}
+  <h{{ headingLevel + 1 }} class="govuk-heading-m" tabindex="-1">
+    <a class="app-link--heading govuk-link" href="#{{ itemId }}">{{ itemTitle }}</a>
+  </h{{ headingLevel + 1 }}>
   <figure class="app-screenshots__screenshot" id="{{ itemId }}">
-    <h{{ headingLevel + 1 }} class="govuk-heading-m" tabindex="-1">
-      <a class="app-link--heading govuk-link" href="#{{ itemId }}">{{ itemTitle }}</a>
-    </h{{ headingLevel + 1 }}>
     <a class="govuk-link" href="{{ file }}"><img src="{{ file }}" alt="{{ alt }}"></a>
     {%- if item.caption %}<figcaption>{{ item.caption | markdown | safe }}</figcaption>{% endif %}
   </figure>

app/styles/application.scss

@@ -33,6 +33,30 @@ $govuk-font-family: Frutiger W01, arial, sans-serif;
 }
 
 .app-prose-scope {
+  // Simulate design used in NHS design system
+  figure {
+    @include govuk-responsive-margin(6, "bottom");
+    @include govuk-responsive-margin(6, "top");
+
+    background-color: govuk-colour("white");
+    border-bottom: 1px solid #d8dde0;
+  }
+
+  figcaption {
+    @include govuk-typography-responsive(16);
+    color: $govuk-text-colour;
+    margin-top: 0;
+    padding: govuk-spacing(3);
+
+    * {
+      @include govuk-typography-responsive(16);
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+
   video {
     max-width: 100%;
   }