Adjust spacing of the Interruption panel

Author: NickColley

packages/govuk-frontend/src/govuk/components/panel/_mixin.scss

@@ -43,7 +43,10 @@
     margin-bottom: base.govuk-spacing(6);
   }
 
-  .govuk-panel__title:last-child {
+  // Remove bottom spacing from anything at the end of the Panel's body
+  // to stop the Panel's padding spacing from becoming too large.
+  .govuk-panel__title:last-child,
+  .govuk-panel__body > :last-child {
     margin-bottom: 0;
   }
 
@@ -56,6 +59,27 @@
     --govuk-text-colour: #{base.govuk-functional-colour(inverse-text)};
     background: base.govuk-functional-colour(brand);
     text-align: left;
+
+    // Smaller title to go alongside smaller body text.
+    .govuk-panel__title {
+      @include base.govuk-font-size($size: 36);
+      margin-bottom: base.govuk-spacing(3);
+    }
+
+    // When the Button group is at the end of the Panel's body then,
+    // make sure it has some spacing away from the other body content.
+    .govuk-panel__body > .govuk-button-group:last-child {
+      margin-top: base.govuk-spacing(6);
+    }
+
+    // On larger screens if the Interruption panel has a Button group at the end of the Panel's body,
+    // then we want to adjust the spacing a bit to avoid the Button group
+    // making the Panel's padding spacing being too large.
+    @media #{base.govuk-from-breakpoint(tablet)} {
+      &:has(.govuk-panel__body > .govuk-button-group:last-child) {
+        padding-bottom: base.govuk-spacing(5);
+      }
+    }
   }
 
   @media print {