Set vertical spacing for <main>

GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.

This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.

app/assets/stylesheets/govuk-frontend/overrides.scss

@@ -18,3 +18,13 @@
 .govuk-main-wrapper {
   position: relative;
 }
+
+// Additional padding-bottom override, following the GOV.UK Frontend spacing scale:
+// https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale
+.govuk-\!-padding-bottom-12 {
+  padding-bottom: 70px;
+
+  @include govuk-media-query($from: tablet) {
+    padding-bottom: 90px;
+  }
+}

app/templates/fullwidth_template.html

@@ -1,5 +1,7 @@
 {% extends "admin_template.html" %}
 
+{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
+
 {% block main %}
   {% block beforeContent %}{% endblock %}
   <main class="govuk-main-wrapper {{ mainClasses }}" id="main-content" role="main">

app/templates/org_template.html

@@ -15,13 +15,13 @@
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>
     </div>
-    <div class="grid-row">
+    <div class="grid-row govuk-!-padding-bottom-12">
       <div class="column-one-quarter">
         {% include "org_nav.html" %}
       </div>
       <div class="column-three-quarters">
         {% block beforeContent %}{% endblock %}
-        <main class="govuk-main-wrapper column-main" id="main-content" role="main" >
+        <main class="govuk-main-wrapper column-main govuk-!-padding-top-0 govuk-!-padding-bottom-0" id="main-content" role="main" >
           {% block content %}
             {% include 'flash_messages.html' %}
             {% block maincolumn_content %}{% endblock %}

app/templates/withnav_template.html

@@ -1,5 +1,7 @@
 {% extends "admin_template.html" %}
 
+{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
+
 {% block per_page_title %}
   {% block service_page_title %}{% endblock %} – {{ current_service.name }}
 {% endblock %}
@@ -18,18 +20,18 @@
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="navigation-service-switch">Switch service</a>
     </div>
-    <div class="grid-row">
+    <div class="grid-row govuk-!-padding-bottom-12">
       {% if help %}
         <div class="column-one-third">
       {% else %}
         <div class="column-one-quarter">
       {% endif %}
-        {% include "main_nav.html" %}
-      </div>
+          {% include "main_nav.html" %}
+        </div>
       {% if help %}
-        <div class="column-two-thirds column-main">
+        <div class="column-two-thirds">
       {% else %}
-        <div class="column-three-quarters column-main">
+        <div class="column-three-quarters">
       {% endif %}
         {% block beforeContent %}{% endblock %}
         <main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">

app/templates/withoutnav_template.html

@@ -1,5 +1,7 @@
 {% extends "admin_template.html" %}
 
+{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-12" %}
+
 {% block beforeContent %}
     {% if current_service and current_service.active and current_user.is_authenticated and current_user.belongs_to_service(current_service.id) %}
     <div class="navigation-service">