Align with GOV.UK design

Some small adjustments to align with GOV.UK design.

Increase bottom padding on buttons to 25px. Note that we only need 15px padding here, as another 10px comes from the invisible bottom border that improves high contrast mode presentation.

Add more spacing between the elements inside the button on mobile.

Increase padding below the 'Show' on tablet/desktop to about 30px. On mobile it should be about 20px.

Also fix alignment of IE8 show/hide icon.

Fixes #2324

src/govuk/components/accordion/_index.scss

@@ -171,10 +171,7 @@
         // IE8 fallback of icon with HTML symbol
         @include govuk-if-ie8 {
           content: "\25B2"; // "▲"
-
-          top: 0;
-          left: 0;
-
+          position: relative;
           border: 0;
         }
       }
@@ -197,7 +194,7 @@
     .govuk-accordion__section-button {
       width: 100%;
 
-      padding: govuk-spacing(2) 0 govuk-spacing(1) 0;
+      padding: govuk-spacing(2) 0 govuk-spacing(3) 0;
 
       border: 0;
 
@@ -215,6 +212,10 @@
       cursor: pointer;
       -webkit-appearance: none;
 
+      @include govuk-media-query ($from: tablet) {
+        padding-bottom: govuk-spacing(2);
+      }
+
       &:active {
         color: $govuk-link-active-colour;
         background: none;
@@ -328,7 +329,11 @@
     // As a result this is applied to the pseudo element that has a display:block property to maintain Design
     .govuk-accordion__section-summary:before,
     .govuk-accordion__section-toggle:before {
-      margin-top: 8px;
+      margin-top: govuk-spacing(2);
+
+      @include govuk-media-query ($from: desktop) {
+        margin-top: 8px;
+      }
     }
 
     // Space between icon and text,