Add a breadcrumb to the product page

This copies what the other GaaP components will be doing for their
product pages.

The SASS and HTML is taken from here:
f05ca1fb71/source/stylesheets/modules/_breadcrumbs.scss

Only changes I’ve made are:
- making the file paths work with our build pipeline

Changes to our code to accomodate this are:
- putting the padding on the product page `<h1>` not its container
- moving the hero image accordingly so that it lines up
- making the `<main>` element on the product page into an anchor so that
  the breadcrumb can link to it – screenreader will then announce the
  link as “GOV.UK Notify, same page”

app/assets/stylesheets/views/product-page.scss

@@ -3,7 +3,7 @@
   &-intro {
 
     margin: -10px 0 $gutter * 1.5 0;
-    padding: $gutter * 2 0 $gutter * 2 0;
+    padding: 0 0 $gutter * 2 0;
     background: $govuk-blue;
     color: $white;
 
@@ -16,7 +16,7 @@
         background-image: file-url('product/proposition-illustration.png');
         background-size: 320px;
         background-repeat: no-repeat;
-        background-position: right -14px top -10px;
+        background-position: right -14px top 85px;
 
         @include ie-lte(8) {
           background-image: none;
@@ -28,7 +28,7 @@
 
     h1 {
       @include bold-48;
-      margin: 0 0 $gutter 0;
+      margin: 20px 0 $gutter 0;
     }
 
     p {