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/templates/fullwidth_template.html

@@ -1,7 +1,7 @@
 {% extends "admin_template.html" %}
 
 {% block fullwidth_content %}
-  <main role="main">
+  <main role="main" id="main">
     {% block maincolumn_content %}{% endblock %}
   </main>
 {% endblock %}

app/templates/views/signedout.html

@@ -10,8 +10,18 @@
 
 {% block maincolumn_content %}
 
-  <div class="product-page-intro">
+  <div class="product-page-intro" id="main">
     <div class="product-page-intro-wrapper">
+      <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
+       <ol itemscope itemtype="http://schema.org/BreadcrumbList">
+         <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+           <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
+         </li>
+         <li class="breadcrumbs__item breadcrumbs__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+           <a href="#main" itemprop="item"><span itemprop="name">GOV.UK Notify</span></a>
+         </li>
+       </ol>
+      </nav>
       <div class="grid-row">
         <div class="column-two-thirds">
           <h1>