Upgrade to Sass modules

[colinrotherham]

Description

Closes #701

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[colinrotherham]

I've resolved all the mixed-decls warnings.

Where necessary, I've added & { } following the Sass Deprecating the Old Way example.

This was also raised previously in:

• Sass has deprecated 'mixed declarations' alphagov/govuk-frontend#5143
• Sass has deprecated 'mixed declarations' #1006

Duplicate selectors

Previously Sass would pull all mixed declarations above nested rules but now with & { } the outer selector is safely duplicated instead. See the working group decision for more info.

This decision is a positive one but uses duplication to ensure what the author intended, without suprises.

Unfortunately using & { } highlights all the places we loop-and-repeat breakpoints.

For example, consider these 4x includes:

@include nhsuk-typography-responsive(19);
@include nhsuk-responsive-padding(3, "bottom");
@include nhsuk-responsive-padding(4, "right");
@include nhsuk-responsive-padding(3, "top");

To avoid using & { } we'd need to split out and apply all default styles first, media queries last.

For now we might need to rely on the minifier to reduce duplication instead. I've included the diff below.

Sass output

   color: #212b32;
 }
 
-html {
-  background-color: #d8dde0;
-  overflow-y: scroll;
-}
 @font-face {
   font-display: swap;
   font-family: "Frutiger W01";
@@ -88,6 +84,8 @@
   src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.eot?#iefix") format("eot"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2") format("woff2"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff") format("woff"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.ttf") format("truetype"), url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.svg#eae74276-dd78-47e4-9b27-dac81c3411ca") format("svg");
 }
 html {
+  background-color: #d8dde0;
+  overflow-y: scroll;
   font-family: "Frutiger W01", arial, sans-serif;
 }
 
@@ -103,11 +101,13 @@
 }
 
 table {
-  margin-bottom: 40px;
   border-spacing: 0;
   vertical-align: top;
   width: 100%;
 }
+table {
+  margin-bottom: 40px;
+}
 @media (min-width: 40.0625em) {
   table {
     margin-bottom: 48px;
@@ -125,16 +125,16 @@
 
 th,
 td {
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
-  padding-bottom: 8px;
-  padding-right: 16px;
-  padding-top: 8px;
   padding-left: 0;
   border-bottom: 1px solid #d8dde0;
   text-align: left;
   vertical-align: top;
+}
+th,
+td {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   th,
@@ -150,6 +150,10 @@
     font-size: 13pt;
     line-height: 1.25;
   }
+}
+th,
+td {
+  padding-bottom: 8px;
 }
 @media (min-width: 40.0625em) {
   th,
@@ -156,6 +160,10 @@
   td {
     padding-bottom: 16px;
   }
+}
+th,
+td {
+  padding-right: 16px;
 }
 @media (min-width: 40.0625em) {
   th,
@@ -162,6 +170,10 @@
   td {
     padding-right: 24px;
   }
+}
+th,
+td {
+  padding-top: 8px;
 }
 @media (min-width: 40.0625em) {
   th,
@@ -179,11 +191,13 @@
 }
 
 caption {
+  text-align: left;
   font-weight: 600;
+}
+caption {
   font-size: 19px;
   font-size: 1.1875rem;
   line-height: 1.42105;
-  text-align: left;
 }
 @media (min-width: 40.0625em) {
   caption {
@@ -458,13 +472,14 @@
 }
 
 ol, ul, .nhsuk-list {
+  list-style-type: none;
+  margin-top: 0;
+  padding-left: 0;
+}
+ol, ul, .nhsuk-list {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  margin-bottom: 16px;
-  list-style-type: none;
-  margin-top: 0;
-  padding-left: 0;
 }
 @media (min-width: 40.0625em) {
   ol, ul, .nhsuk-list {
@@ -479,14 +494,19 @@
     line-height: 1.25;
   }
 }
+ol, ul, .nhsuk-list {
+  margin-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   ol, ul, .nhsuk-list {
     margin-bottom: 24px;
   }
+}
+ol ol, ul ol, ol ul, ul ul, .nhsuk-list ol, .nhsuk-list ul, ol .nhsuk-list, ul .nhsuk-list, .nhsuk-list .nhsuk-list {
+  margin-bottom: 0;
 }
 ol ol, ul ol, ol ul, ul ul, .nhsuk-list ol, .nhsuk-list ul, ol .nhsuk-list, ul .nhsuk-list, .nhsuk-list .nhsuk-list {
   margin-top: 8px;
-  margin-bottom: 0;
 }
 @media (min-width: 40.0625em) {
   ol ol, ul ol, ol ul, ul ul, .nhsuk-list ol, .nhsuk-list ul, ol .nhsuk-list, ul .nhsuk-list, .nhsuk-list .nhsuk-list {
@@ -537,12 +557,14 @@
 
 .nhsuk-section-break--xl {
   margin-top: 48px;
-  margin-bottom: 48px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-section-break--xl {
     margin-top: 56px;
   }
+}
+.nhsuk-section-break--xl {
+  margin-bottom: 48px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-section-break--xl {
@@ -552,12 +574,14 @@
 
 hr, .nhsuk-section-break--l {
   margin-top: 32px;
-  margin-bottom: 32px;
 }
 @media (min-width: 40.0625em) {
   hr, .nhsuk-section-break--l {
     margin-top: 40px;
   }
+}
+hr, .nhsuk-section-break--l {
+  margin-bottom: 32px;
 }
 @media (min-width: 40.0625em) {
   hr, .nhsuk-section-break--l {
@@ -567,12 +591,14 @@
 
 .nhsuk-section-break--m {
   margin-top: 16px;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-section-break--m {
     margin-top: 24px;
   }
+}
+.nhsuk-section-break--m {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-section-break--m {
@@ -586,13 +612,15 @@
 
 h1,
 .nhsuk-heading-xl {
+  display: block;
+  font-weight: 600;
+  margin-top: 0;
+}
+h1,
+.nhsuk-heading-xl {
   font-size: 32px;
   font-size: 2rem;
   line-height: 1.1875;
-  display: block;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   h1,
@@ -608,6 +636,10 @@
     font-size: 26pt;
     line-height: 1.15;
   }
+}
+h1,
+.nhsuk-heading-xl {
+  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   h1,
@@ -617,14 +650,15 @@
 }
 
 h2,
+  display: block;
 .nhsuk-heading-l {
+  font-weight: 600;
+  margin-top: 0;
+}
+h2,
+.nhsuk-heading-l {
   font-size: 27px;
   font-size: 1.6875rem;
   line-height: 1.22222;
-  display: block;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h2,
@@ -640,6 +674,10 @@
     font-size: 20pt;
     line-height: 1.2;
   }
+}
+h2,
+.nhsuk-heading-l {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h2,
@@ -650,13 +688,15 @@
 
 h3,
 .nhsuk-heading-m {
+  display: block;
+  font-weight: 600;
+  margin-top: 0;
+}
+h3,
+.nhsuk-heading-m {
   font-size: 22px;
   font-size: 1.375rem;
   line-height: 1.31818;
-  display: block;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h3,
@@ -673,6 +713,10 @@
     line-height: 1.25;
   }
 }
+h3,
+.nhsuk-heading-m {
+  margin-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   h3,
   .nhsuk-heading-m {
@@ -680,15 +724,17 @@
   }
 }
 
+h4,
+.nhsuk-heading-s {
+  display: block;
+  font-weight: 600;
+  margin-top: 0;
+}
 h4,
 .nhsuk-heading-s {
   font-size: 19px;
   font-size: 1.1875rem;
   line-height: 1.42105;
-  display: block;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h4,
@@ -704,6 +750,10 @@
     font-size: 15pt;
     line-height: 1.25;
   }
+}
+h4,
+.nhsuk-heading-s {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h4,
@@ -714,13 +764,15 @@
 
 h5,
 .nhsuk-heading-xs {
+  display: block;
+  font-weight: 600;
+  margin-top: 0;
+}
+h5,
+.nhsuk-heading-xs {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  display: block;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h5,
@@ -737,6 +789,10 @@
     line-height: 1.25;
   }
 }
+h5,
+.nhsuk-heading-xs {
+  margin-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   h5,
   .nhsuk-heading-xs {
@@ -744,15 +800,17 @@
   }
 }
 
+h6,
+.nhsuk-heading-xxs {
+  display: block;
+  font-weight: 600;
+  margin-top: 0;
+}
 h6,
 .nhsuk-heading-xxs {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  display: block;
-  font-weight: 600;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h6,
@@ -768,6 +826,10 @@
     font-size: 13pt;
     line-height: 1.25;
   }
+}
+h6,
+.nhsuk-heading-xxs {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   h6,
@@ -777,13 +839,15 @@
 }
 
 .nhsuk-caption-xl {
+  color: #4c6272;
+  display: block;
+  margin-bottom: 4px;
   font-weight: 400;
+}
+.nhsuk-caption-xl {
   font-size: 22px;
   font-size: 1.375rem;
   line-height: 1.31818;
-  color: #4c6272;
-  display: block;
-  margin-bottom: 4px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-caption-xl {
@@ -800,13 +864,15 @@
 }
 
 .nhsuk-caption-l {
+  color: #4c6272;
+  display: block;
+  margin-bottom: 4px;
   font-weight: 400;
+}
+.nhsuk-caption-l {
   font-size: 19px;
   font-size: 1.1875rem;
   line-height: 1.42105;
-  color: #4c6272;
-  display: block;
-  margin-bottom: 4px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-caption-l {
@@ -823,12 +889,14 @@
 }
 
 .nhsuk-caption-m {
+  color: #4c6272;
+  display: block;
   font-weight: 400;
+}
+.nhsuk-caption-m {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  color: #4c6272;
-  display: block;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-caption-m {
@@ -849,13 +917,14 @@
   margin-top: 4px;
 }
 
+.nhsuk-body-l {
+  display: block;
+  margin-top: 0;
+}
 .nhsuk-body-l {
   font-size: 20px;
   font-size: 1.25rem;
   line-height: 1.4;
-  display: block;
-  margin-top: 0;
-  margin-bottom: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-body-l {
@@ -869,6 +938,9 @@
     font-size: 16pt;
     line-height: 1.25;
   }
+}
+.nhsuk-body-l {
+  margin-bottom: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-body-l {
@@ -878,12 +950,14 @@
 
 address, p,
 .nhsuk-body-m {
+  display: block;
+  margin-top: 0;
+}
+address, p,
+.nhsuk-body-m {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  display: block;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   address, p,
@@ -900,6 +974,10 @@
     line-height: 1.25;
   }
 }
+address, p,
+.nhsuk-body-m {
+  margin-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   address, p,
   .nhsuk-body-m {
@@ -912,13 +990,14 @@
   color: inherit;
 }
 
+.nhsuk-body-s {
+  display: block;
+  margin-top: 0;
+}
 .nhsuk-body-s {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  display: block;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-body-s {
@@ -932,6 +1011,9 @@
     font-size: 12pt;
     line-height: 1.3;
   }
+}
+.nhsuk-body-s {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-body-s {
@@ -945,10 +1027,11 @@
 
 .nhsuk-lede-text {
   font-weight: 400;
+}
+.nhsuk-lede-text {
   font-size: 20px;
   font-size: 1.25rem;
   line-height: 1.4;
-  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-lede-text {
@@ -962,6 +1045,9 @@
     font-size: 16pt;
     line-height: 1.25;
   }
+}
+.nhsuk-lede-text {
+  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-lede-text {
@@ -971,6 +1057,9 @@
 .nhsuk-lede-text p,
 .nhsuk-lede-text ul {
   font-weight: 400;
+}
+.nhsuk-lede-text p,
+.nhsuk-lede-text ul {
   font-size: 20px;
   font-size: 1.25rem;
   line-height: 1.4;
@@ -993,10 +1082,11 @@
 
 .nhsuk-lede-text--small {
   font-weight: 400;
+}
+.nhsuk-lede-text--small {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  margin-bottom: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-lede-text--small {
@@ -1011,6 +1101,9 @@
     line-height: 1.25;
   }
 }
+.nhsuk-lede-text--small {
+  margin-bottom: 24px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-lede-text--small {
     margin-bottom: 32px;
@@ -1039,13 +1132,7 @@
 .nhsuk-body-m + .nhsuk-heading-l,
 address + .nhsuk-heading-l,
 .nhsuk-body-s + h2,
+.nhsuk-body-s + .nhsuk-heading-l {
-.nhsuk-body-s + .nhsuk-heading-l,
-.nhsuk-list + h2,
-ul + h2,
-ol + h2,
-.nhsuk-list + .nhsuk-heading-l,
-ul + .nhsuk-heading-l,
-ol + .nhsuk-heading-l {
   padding-top: 16px;
 }
 @media (min-width: 40.0625em) {
@@ -1055,13 +1142,7 @@
   .nhsuk-body-m + .nhsuk-heading-l,
   address + .nhsuk-heading-l,
   .nhsuk-body-s + h2,
+  .nhsuk-body-s + .nhsuk-heading-l {
-  .nhsuk-body-s + .nhsuk-heading-l,
-  .nhsuk-list + h2,
-  ul + h2,
-  ol + h2,
-  .nhsuk-list + .nhsuk-heading-l,
-  ul + .nhsuk-heading-l,
-  ol + .nhsuk-heading-l {
     padding-top: 24px;
   }
 }
@@ -1073,12 +1154,6 @@
 address + .nhsuk-heading-m,
 .nhsuk-body-s + h3,
 .nhsuk-body-s + .nhsuk-heading-m,
-.nhsuk-list + h3,
-ul + h3,
-ol + h3,
-.nhsuk-list + .nhsuk-heading-m,
-ul + .nhsuk-heading-m,
-ol + .nhsuk-heading-m,
 p + h4,
 .nhsuk-body-m + h4,
 address + h4,
@@ -1086,13 +1161,7 @@
 .nhsuk-body-m + .nhsuk-heading-s,
 address + .nhsuk-heading-s,
 .nhsuk-body-s + h4,
+.nhsuk-body-s + .nhsuk-heading-s {
-.nhsuk-body-s + .nhsuk-heading-s,
-.nhsuk-list + h4,
-ul + h4,
-ol + h4,
-.nhsuk-list + .nhsuk-heading-s,
-ul + .nhsuk-heading-s,
-ol + .nhsuk-heading-s {
   padding-top: 4px;
 }
 @media (min-width: 40.0625em) {
@@ -1103,12 +1172,6 @@
   address + .nhsuk-heading-m,
   .nhsuk-body-s + h3,
   .nhsuk-body-s + .nhsuk-heading-m,
-  .nhsuk-list + h3,
-  ul + h3,
-  ol + h3,
-  .nhsuk-list + .nhsuk-heading-m,
-  ul + .nhsuk-heading-m,
-  ol + .nhsuk-heading-m,
   p + h4,
   .nhsuk-body-m + h4,
   address + h4,
@@ -1116,13 +1179,7 @@
   .nhsuk-body-m + .nhsuk-heading-s,
   address + .nhsuk-heading-s,
   .nhsuk-body-s + h4,
+  .nhsuk-body-s + .nhsuk-heading-s {
-  .nhsuk-body-s + .nhsuk-heading-s,
-  .nhsuk-list + h4,
-  ul + h4,
-  ol + h4,
-  .nhsuk-list + .nhsuk-heading-s,
-  ul + .nhsuk-heading-s,
-  ol + .nhsuk-heading-s {
     padding-top: 8px;
   }
 }
@@ -1178,12 +1235,6 @@
   address + .nhsuk-heading-l,
   .nhsuk-body-s + h2,
   .nhsuk-body-s + .nhsuk-heading-l,
-  .nhsuk-list + h2,
-  ul + h2,
-  ol + h2,
-  .nhsuk-list + .nhsuk-heading-l,
-  ul + .nhsuk-heading-l,
-  ol + .nhsuk-heading-l,
   p + h3,
   .nhsuk-body-m + h3,
   address + h3,
@@ -1192,12 +1243,6 @@
   address + .nhsuk-heading-m,
   .nhsuk-body-s + h3,
   .nhsuk-body-s + .nhsuk-heading-m,
-  .nhsuk-list + h3,
-  ul + h3,
-  ol + h3,
-  .nhsuk-list + .nhsuk-heading-m,
-  ul + .nhsuk-heading-m,
-  ol + .nhsuk-heading-m,
   p + h4,
   .nhsuk-body-m + h4,
   address + h4,
@@ -1205,13 +1250,7 @@
   .nhsuk-body-m + .nhsuk-heading-s,
   address + .nhsuk-heading-s,
   .nhsuk-body-s + h4,
+  .nhsuk-body-s + .nhsuk-heading-s {
-  .nhsuk-body-s + .nhsuk-heading-s,
-  .nhsuk-list + h4,
-  ul + h4,
-  ol + h4,
-  .nhsuk-list + .nhsuk-heading-s,
-  ul + .nhsuk-heading-s,
-  ol + .nhsuk-heading-s {
     padding-top: 0.45em;
   }
 }
@@ -2501,15 +2540,16 @@
 }
 
 .nhsuk-action-link__link {
-  font-weight: 400;
-  font-size: 19px;
-  font-size: 1.1875rem;
-  line-height: 1.42105;
   display: inline-block;
-  font-weight: 600;
   padding-left: 38px;
   position: relative;
   text-decoration: none;
+  font-weight: 600;
+}
+.nhsuk-action-link__link {
+  font-size: 19px;
+  font-size: 1.1875rem;
+  line-height: 1.42105;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-action-link__link {
@@ -2589,10 +2629,6 @@
 }
 
 .nhsuk-back-link__link {
-  font-size: 14px;
-  font-size: 0.875rem;
-  line-height: 1.71429;
-  color: #005eb8;
   background: none;
   border: 0;
   cursor: pointer;
@@ -2600,20 +2636,8 @@
   padding: 0 0 0 16px;
   position: relative;
   text-decoration: none;
+  color: #005eb8;
 }
-@media (min-width: 40.0625em) {
-  .nhsuk-back-link__link {
-    font-size: 16px;
-    font-size: 1rem;
-    line-height: 1.5;
-  }
-}
-@media print {
-  .nhsuk-back-link__link {
-    font-size: 12pt;
-    line-height: 1.3;
-  }
-}
 .nhsuk-back-link__link:visited {
   color: #330072;
 }
@@ -2639,7 +2663,25 @@
 }
 .nhsuk-back-link__link:active {
   color: #002f5c;
+}
+.nhsuk-back-link__link {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.71429;
+}
+@media (min-width: 40.0625em) {
+  .nhsuk-back-link__link {
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.5;
+  }
 }
+@media print {
+  .nhsuk-back-link__link {
+    font-size: 12pt;
+    line-height: 1.3;
+  }
+}
 .nhsuk-back-link__link .nhsuk-icon__chevron-left {
   height: 24px;
   left: -8px;
@@ -2681,18 +2723,15 @@
 }
 
 .nhsuk-breadcrumb__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   font-weight: 400;
+}
+.nhsuk-breadcrumb__list {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-@media (max-width: 40.0525em) {
-  .nhsuk-breadcrumb__list {
-    display: none;
-  }
 }
 @media (min-width: 40.0625em) {
   .nhsuk-breadcrumb__list {
@@ -2705,16 +2744,23 @@
   .nhsuk-breadcrumb__list {
     font-size: 12pt;
     line-height: 1.3;
+  }
+}
+@media (max-width: 40.0525em) {
+  .nhsuk-breadcrumb__list {
+    display: none;
   }
 }
 
 .nhsuk-breadcrumb__item {
+  display: inline-block;
+  margin-bottom: 0;
   font-weight: 400;
+}
+.nhsuk-breadcrumb__item {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  display: inline-block;
-  margin-bottom: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-breadcrumb__item {
@@ -2751,13 +2797,15 @@
 }
 
 .nhsuk-breadcrumb__back {
+  margin: 0;
+  padding-left: 16px;
+  position: relative;
   font-weight: 400;
+}
+.nhsuk-breadcrumb__back {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  margin: 0;
-  padding-left: 16px;
-  position: relative;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-breadcrumb__back {
@@ -2799,11 +2847,6 @@
 }
 
 .nhsuk-button {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
-  margin-bottom: 28px;
   -webkit-appearance: none;
   background-color: #007f3b;
   border: 2px solid transparent;
@@ -2820,6 +2863,12 @@
   text-align: center;
   vertical-align: top;
   width: auto;
+  font-weight: 400;
+}
+.nhsuk-button {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-button {
@@ -2834,6 +2883,9 @@
     line-height: 1.25;
   }
 }
+.nhsuk-button {
+  margin-bottom: 28px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-button {
     margin-bottom: 36px;
@@ -2962,11 +3014,13 @@
 }
 
 .nhsuk-card {
-  margin-bottom: 40px;
   background: #ffffff;
   border: 1px solid #d8dde0;
   position: relative;
   width: 100%;
+}
+.nhsuk-card {
+  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-card {
@@ -2985,9 +3039,6 @@
   }
 }
 
-.nhsuk-card__content {
-  padding: 24px;
-}
 .nhsuk-card__content > *:first-child {
   margin-top: 0;
 }
@@ -2994,6 +3045,9 @@
 .nhsuk-card__content > *:last-child {
   margin-bottom: 0;
 }
+.nhsuk-card__content {
+  padding: 24px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-card__content {
     padding: 32px;
@@ -3026,10 +3080,10 @@
 }
 
 .nhsuk-card-group {
+  margin-bottom: 16px;
+  padding: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 16px;
-  padding: 0;
 }
 @media (max-width: 48.0525em) {
   .nhsuk-card-group {
@@ -3044,9 +3098,9 @@
 }
 
 .nhsuk-card-group__item {
-  display: flex;
   list-style-type: none;
   margin-bottom: 0;
+  display: flex;
 }
 @media (max-width: 48.0525em) {
   .nhsuk-card-group__item {
@@ -3098,14 +3152,6 @@
   padding-top: 0 !important;
 }
 
-.nhsuk-card--care {
-  margin-top: 40px;
-}
-@media (min-width: 40.0625em) {
-  .nhsuk-card--care {
-    margin-top: 48px;
-  }
-}
 .nhsuk-card--care .nhsuk-card--care__heading-container {
   background-color: #005eb8;
   color: #ffffff;
@@ -3115,15 +3161,24 @@
     border: 4px solid #212b32;
     color: #212b32;
     page-break-inside: avoid;
+  }
+}
+.nhsuk-card--care {
+  margin-top: 40px;
+}
+@media (min-width: 40.0625em) {
+  .nhsuk-card--care {
+    margin-top: 48px;
   }
 }
 
 .nhsuk-card--care__heading-container {
-  padding-left: 24px;
-  padding-right: 24px;
   padding-bottom: 16px;
   padding-top: 16px;
   position: relative;
+}
+.nhsuk-card--care__heading-container {
+  padding-left: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-card--care__heading-container {
@@ -3130,6 +3185,9 @@
     padding-left: 32px;
   }
 }
+.nhsuk-card--care__heading-container {
+  padding-right: 24px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-card--care__heading-container {
     padding-right: 32px;
@@ -3137,12 +3195,14 @@
 }
 
 .nhsuk-card--care__heading {
+  margin: 0;
+  padding-top: 0;
   font-weight: 600;
+}
+.nhsuk-card--care__heading {
   font-size: 22px;
   font-size: 1.375rem;
   line-height: 1.31818;
-  margin: 0;
-  padding-top: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-card--care__heading {
@@ -3348,12 +3408,8 @@
 }
 
 .nhsuk-details {
+  display: block;
   color: #212b32;
-  margin-bottom: 16px;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
-  display: block;
 }
 @media print {
   .nhsuk-details {
@@ -3360,10 +3416,10 @@
     color: #212b32;
   }
 }
+.nhsuk-details {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
-@media (min-width: 40.0625em) {
-  .nhsuk-details {
-    margin-bottom: 24px;
-  }
 }
 @media (min-width: 40.0625em) {
   .nhsuk-details {
@@ -3377,7 +3433,15 @@
     font-size: 13pt;
     line-height: 1.25;
   }
+}
+.nhsuk-details {
+  margin-bottom: 16px;
 }
+@media (min-width: 40.0625em) {
+  .nhsuk-details {
+    margin-bottom: 24px;
+  }
+}
 
 .nhsuk-details__summary {
   color: #005eb8;
@@ -3509,28 +3573,36 @@
   width: 32px;
 }
 .nhsuk-expander .nhsuk-details__text {
-  padding-bottom: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-top: 0;
   border-left: 0;
   margin-left: 0;
   margin-top: 0;
 }
+.nhsuk-expander .nhsuk-details__text {
+  padding-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-expander .nhsuk-details__text {
     padding-bottom: 24px;
   }
+}
+.nhsuk-expander .nhsuk-details__text {
+  padding-left: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-expander .nhsuk-details__text {
     padding-left: 24px;
   }
+}
+.nhsuk-expander .nhsuk-details__text {
+  padding-right: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-expander .nhsuk-details__text {
     padding-right: 24px;
   }
+}
+.nhsuk-expander .nhsuk-details__text {
+  padding-top: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-expander .nhsuk-details__text {
@@ -3553,14 +3625,6 @@
 
 .nhsuk-expander-group {
   margin-bottom: 16px;
-}
-.nhsuk-expander-group > .nhsuk-details {
-  margin-bottom: 8px;
-}
-@media (min-width: 40.0625em) {
-  .nhsuk-expander-group > .nhsuk-details {
-    margin-bottom: 8px;
-  }
 }
 @media (min-width: 40.0625em) {
   .nhsuk-expander-group {
@@ -3567,26 +3631,20 @@
     margin-bottom: 24px;
   }
 }
+.nhsuk-expander-group > .nhsuk-details {
+  margin-bottom: 8px;
-
-.nhsuk-details + h2,
-.nhsuk-details + .nhsuk-heading-l {
-  padding-top: 16px;
 }
 @media (min-width: 40.0625em) {
+  .nhsuk-expander-group > .nhsuk-details {
+    margin-bottom: 8px;
-  .nhsuk-details + h2,
-  .nhsuk-details + .nhsuk-heading-l {
-    padding-top: 24px;
   }
 }
 
 .nhsuk-do-dont-list {
+  border: 1px solid #d8dde0;
+  padding-top: 0 !important;
-  margin-bottom: 40px;
-  margin-top: 40px;
-  padding: 24px;
   background-color: #ffffff;
   color: #212b32;
-  border: 1px solid #d8dde0;
-  padding-top: 0 !important;
 }
 .nhsuk-do-dont-list > *:first-child {
   margin-top: 0;
@@ -3593,6 +3651,9 @@
 }
 .nhsuk-do-dont-list > *:last-child {
   margin-bottom: 0;
+}
+.nhsuk-do-dont-list {
+  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-do-dont-list {
@@ -3599,10 +3660,16 @@
     margin-bottom: 48px;
   }
 }
+.nhsuk-do-dont-list {
+  margin-top: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-do-dont-list {
     margin-top: 48px;
   }
+}
+.nhsuk-do-dont-list {
+  padding: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-do-dont-list {
@@ -3617,9 +3684,6 @@
 }
 
 .nhsuk-do-dont-list__label {
-  font-size: 20px;
-  font-size: 1.25rem;
-  line-height: 1.4;
   background-color: #005eb8;
   color: #ffffff;
   display: inline-block;
@@ -3628,6 +3692,11 @@
   position: relative;
   top: -16px;
 }
+.nhsuk-do-dont-list__label {
+  font-size: 20px;
+  font-size: 1.25rem;
+  line-height: 1.4;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-do-dont-list__label {
     font-size: 24px;
@@ -3667,14 +3736,16 @@
 }
 
 .nhsuk-error-message {
+  clear: both;
+  color: #d5281b;
+  display: block;
+  margin-bottom: 16px;
   font-weight: 600;
+}
+.nhsuk-error-message {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  clear: both;
-  color: #d5281b;
-  display: block;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-error-message {
@@ -3691,9 +3762,11 @@
 }
 
 .nhsuk-error-summary {
-  padding: 16px;
   margin-bottom: 32px;
   border: 4px solid #d5281b;
+}
+.nhsuk-error-summary {
+  padding: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-error-summary {
@@ -3717,12 +3790,13 @@
 }
 
 .nhsuk-error-summary__title {
+  margin-top: 0;
   font-weight: 600;
+}
+.nhsuk-error-summary__title {
   font-size: 22px;
   font-size: 1.375rem;
   line-height: 1.31818;
-  margin-top: 0;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-error-summary__title {
@@ -3736,6 +3810,9 @@
     font-size: 17pt;
     line-height: 1.25;
   }
+}
+.nhsuk-error-summary__title {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-error-summary__title {
@@ -3745,6 +3822,8 @@
 
 .nhsuk-error-summary__body {
   font-weight: 400;
+}
+.nhsuk-error-summary__body {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
@@ -3764,6 +3843,8 @@
 }
 .nhsuk-error-summary__body p {
   margin-top: 0;
+}
+.nhsuk-error-summary__body p {
   margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
@@ -3803,10 +3884,6 @@
 }
 
 .nhsuk-fieldset__legend {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   box-sizing: border-box;
   color: #212b32;
   display: table;
@@ -3815,7 +3892,13 @@
   max-width: 100%;
   padding: 0;
   white-space: normal;
+  font-weight: 400;
 }
+.nhsuk-fieldset__legend {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-fieldset__legend {
     font-size: 19px;
@@ -3831,11 +3914,13 @@
 }
 
 .nhsuk-fieldset__legend--xl {
+  margin-bottom: 16px;
   font-weight: 600;
+}
+.nhsuk-fieldset__legend--xl {
   font-size: 32px;
   font-size: 2rem;
   line-height: 1.1875;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-fieldset__legend--xl {
@@ -3852,11 +3937,13 @@
 }
 
 .nhsuk-fieldset__legend--l {
+  margin-bottom: 16px;
   font-weight: 600;
+}
+.nhsuk-fieldset__legend--l {
   font-size: 27px;
   font-size: 1.6875rem;
   line-height: 1.22222;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-fieldset__legend--l {
@@ -3873,11 +3960,13 @@
 }
 
 .nhsuk-fieldset__legend--m {
+  margin-bottom: 16px;
   font-weight: 600;
+}
+.nhsuk-fieldset__legend--m {
   font-size: 22px;
   font-size: 1.375rem;
   line-height: 1.31818;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-fieldset__legend--m {
@@ -3894,11 +3983,13 @@
 }
 
 .nhsuk-fieldset__legend--s {
+  margin-bottom: 16px;
   font-weight: 600;
+}
+.nhsuk-fieldset__legend--s {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-fieldset__legend--s {
@@ -3921,8 +4012,6 @@
 }
 
 .nhsuk-footer-container {
-  padding-bottom: 24px;
-  padding-top: 24px;
   background-color: #d8dde0;
   border-top: 4px solid #005eb8;
 }
@@ -3936,10 +4025,16 @@
     display: none;
   }
 }
+.nhsuk-footer-container {
+  padding-bottom: 24px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-footer-container {
     padding-bottom: 32px;
   }
+}
+.nhsuk-footer-container {
+  padding-top: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-footer-container {
@@ -3959,18 +4054,17 @@
 }
 
 .nhsuk-footer__list {
-  padding-bottom: 16px;
   list-style-type: none;
   margin-bottom: 25px;
   padding-left: 0;
 }
+.nhsuk-footer__list {
+  padding-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-footer__list {
     padding-bottom: 24px;
   }
-}
-.nhsuk-footer__list:last-child {
-  margin-bottom: 15px;
 }
 @media (min-width: 48.0625em) {
   .nhsuk-footer__list {
@@ -3982,10 +4076,15 @@
   .nhsuk-footer__list:last-child {
     padding-right: 0;
   }
+}
+.nhsuk-footer__list:last-child {
+  margin-bottom: 15px;
 }
 
 .nhsuk-footer__list-item {
   font-weight: 400;
+}
+.nhsuk-footer__list-item {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
@@ -4028,12 +4127,14 @@
 }
 
 .nhsuk-footer__copyright {
+  color: #231f20;
+  margin-bottom: 0;
   font-weight: 400;
+}
+.nhsuk-footer__copyright {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  color: #231f20;
-  margin-bottom: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-footer__copyright {
@@ -4061,9 +4162,9 @@
 }
 
 .nhsuk-header__container {
+  padding: 20px 0;
   margin: 0 16px;
   max-width: 960px;
-  padding: 20px 0;
 }
 @media (min-width: 48.0625em) {
   .nhsuk-header__container {
@@ -4086,8 +4187,28 @@
   .nhsuk-header__logo {
     position: relative;
     z-index: 1;
+  }
+}
+@media (min-width: 40.0625em) {
+  .nhsuk-header__logo {
+    padding-left: 0;
   }
 }
+@media (max-width: 48.0525em) {
+  .nhsuk-header__logo {
+    max-width: 60%;
+  }
+}
+@media (max-width: 450px) {
+  .nhsuk-header__logo {
+    max-width: 50%;
+  }
+}
+.nhsuk-header__logo .nhsuk-logo {
+  height: 40px;
+  width: 100px;
+  border: 0;
+}
 .nhsuk-header__logo .nhsuk-logo__background {
   fill: #ffffff;
 }
@@ -4102,28 +4223,8 @@
 @media print {
   .nhsuk-header__logo .nhsuk-logo__text {
     fill: #ffffff;
-  }
-}
-@media (min-width: 40.0625em) {
-  .nhsuk-header__logo {
-    padding-left: 0;
-  }
-}
-.nhsuk-header__logo .nhsuk-logo {
-  height: 40px;
-  width: 100px;
-  border: 0;
-}
-@media (max-width: 48.0525em) {
-  .nhsuk-header__logo {
-    max-width: 60%;
   }
 }
-@media (max-width: 450px) {
-  .nhsuk-header__logo {
-    max-width: 50%;
-  }
-}
 
 .nhsuk-header__link {
   height: 40px;
@@ -4139,14 +4240,14 @@
 .nhsuk-header__link:focus .nhsuk-logo {
   box-shadow: 0 0 0 4px #ffeb3b, 0 4px 0 4px #212b32;
 }
+.nhsuk-header__link:hover, .nhsuk-header__link:active, .nhsuk-header__link:focus {
+  background-color: transparent;
+}
 @media print {
   .nhsuk-header__link::after {
     content: "";
   }
 }
-.nhsuk-header__link:hover, .nhsuk-header__link:active, .nhsuk-header__link:focus {
-  background-color: transparent;
-}
 
 .nhsuk-header__logo--only {
   max-width: 100%;
@@ -4371,10 +4472,6 @@
 }
 
 .nhsuk-header__navigation-link {
-  font-weight: 400;
-  font-size: 14px;
-  font-size: 0.875rem;
-  line-height: 1.71429;
   border-bottom: 4px solid transparent;
   border-top: 4px solid transparent;
   color: #ffffff;
@@ -4383,6 +4480,12 @@
   padding: 16px 2px;
   text-decoration: underline;
   white-space: nowrap;
+  font-weight: 400;
+}
+.nhsuk-header__navigation-link {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1.71429;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-header__navigation-link {
@@ -4502,11 +4605,11 @@
 }
 
 .nhsuk-header__navigation-list {
-  margin: 0 16px;
-  max-width: 960px;
   display: flex;
   gap: 24px;
   width: 100%;
+  margin: 0 16px;
+  max-width: 960px;
 }
 @media (min-width: 48.0625em) {
   .nhsuk-header__navigation-list {
@@ -4517,6 +4620,9 @@
   .nhsuk-header__navigation-list {
     margin: 0 auto;
   }
+}
+.js-enabled .nhsuk-header__navigation-list {
+  display: flex;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-header__navigation-list {
@@ -4528,9 +4634,6 @@
     justify-content: space-between;
   }
 }
-.js-enabled .nhsuk-header__navigation-list {
-  display: flex;
-}
 
 @media (min-width: 48.0625em) {
   .nhsuk-header__navigation-list--left-aligned {
@@ -4571,9 +4674,9 @@
   }
 }
 .nhsuk-header__drop-down .nhsuk-header__navigation-link {
+  padding: 12px 0;
   margin: 0 16px;
   max-width: 960px;
-  padding: 12px 0;
 }
 @media (min-width: 48.0625em) {
   .nhsuk-header__drop-down .nhsuk-header__navigation-link {
@@ -4776,14 +4879,16 @@
 }
 
 .nhsuk-header__service-name {
+  color: #ffffff;
+  display: block;
+  padding-left: 0;
+  padding-right: 0;
   font-weight: 400;
+}
+.nhsuk-header__service-name {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  color: #ffffff;
-  display: block;
-  padding-left: 0;
-  padding-right: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-header__service-name {
@@ -4823,12 +4928,9 @@
 }
 
 .nhsuk-header__transactional-service-name--link {
+  text-decoration: none;
   color: #ffffff;
   font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
-  text-decoration: none;
 }
 .nhsuk-header__transactional-service-name--link:visited {
   color: #ffffff;
@@ -4845,6 +4947,11 @@
 }
 .nhsuk-header__transactional-service-name--link:active {
   color: #002f5c;
+}
+.nhsuk-header__transactional-service-name--link {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-header__transactional-service-name--link {
@@ -4867,9 +4974,9 @@
   justify-content: normal;
 }
 .nhsuk-header__transactional .nhsuk-header__link {
+  display: block;
   height: 32px;
   width: 80px;
-  display: block;
 }
 .nhsuk-header__transactional .nhsuk-logo {
   height: 32px;
@@ -5012,7 +5119,6 @@
 
 .nhsuk-hero__wrapper {
   padding-top: 48px;
-  padding-bottom: 48px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-hero__wrapper {
@@ -5019,6 +5125,9 @@
     padding-top: 56px;
   }
 }
+.nhsuk-hero__wrapper {
+  padding-bottom: 48px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-hero__wrapper {
     padding-bottom: 56px;
@@ -5143,13 +5252,15 @@
 }
 
 .nhsuk-hint {
+  color: #4c6272;
+  display: block;
+  margin-bottom: 16px;
   font-weight: 400;
+}
+.nhsuk-hint {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  color: #4c6272;
-  display: block;
-  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-hint {
@@ -5182,13 +5293,17 @@
   border-bottom: 1px solid #d8dde0;
   margin-left: 0;
   margin-right: 0;
+}
+.nhsuk-image {
   margin-bottom: 32px;
-  margin-top: 32px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-image {
     margin-bottom: 40px;
   }
+}
+.nhsuk-image {
+  margin-top: 32px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-image {
@@ -5220,10 +5335,12 @@
 }
 
 .nhsuk-image__caption {
+  padding: 16px;
+}
+.nhsuk-image__caption {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  padding: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-image__caption {
@@ -5240,10 +5357,6 @@
 }
 
 .nhsuk-input {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   -webkit-appearance: none;
   appearance: none;
   border: 2px solid #4c6272;
@@ -5253,7 +5366,13 @@
   margin-top: 0;
   padding: 4px;
   width: 100%;
+  font-weight: 400;
 }
+.nhsuk-input {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-input {
     font-size: 19px;
@@ -5327,10 +5446,6 @@
 
 .nhsuk-input__prefix,
 .nhsuk-input__suffix {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   background-color: #d8dde0;
   border: 2px solid #4c6272;
   box-sizing: border-box;
@@ -5342,7 +5457,14 @@
   padding: 4px;
   text-align: center;
   white-space: nowrap;
+  font-weight: 400;
 }
+.nhsuk-input__prefix,
+.nhsuk-input__suffix {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-input__prefix,
   .nhsuk-input__suffix {
@@ -5398,11 +5520,8 @@
 }
 
 .nhsuk-inset-text {
+  border-left: 8px solid #005eb8;
   max-width: 44em;
-  margin-bottom: 40px;
-  margin-top: 40px;
-  padding: 16px;
-  border-left: 8px solid #005eb8;
 }
 .nhsuk-inset-text > *:first-child {
   margin-top: 0;
@@ -5410,15 +5529,24 @@
 .nhsuk-inset-text > *:last-child {
   margin-bottom: 0;
 }
+.nhsuk-inset-text {
+  margin-bottom: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-inset-text {
     margin-bottom: 48px;
   }
+}
+.nhsuk-inset-text {
+  margin-top: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-inset-text {
     margin-top: 48px;
   }
+}
+.nhsuk-inset-text {
+  padding: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-inset-text {
@@ -5432,12 +5560,14 @@
 }
 
 .nhsuk-label {
+  display: block;
+  margin-bottom: 4px;
   font-weight: 400;
+}
+.nhsuk-label {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  display: block;
-  margin-bottom: 4px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-label {
@@ -5519,11 +5649,13 @@
 }
 
 .nhsuk-label--s {
+  font-weight: 600;
+  margin-top: 0;
+}
+.nhsuk-label--s {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  font-weight: 600;
-  margin-top: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-label--s {
@@ -5545,7 +5677,6 @@
 
 .nhsuk-pagination {
   margin-top: 40px;
-  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-pagination {
@@ -5552,6 +5683,9 @@
     margin-top: 48px;
   }
 }
+.nhsuk-pagination {
+  margin-bottom: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-pagination {
     margin-bottom: 48px;
@@ -5641,11 +5775,13 @@
   fill: #212b32;
 }
 
+.nhsuk-pagination__title {
+  display: block;
+}
 .nhsuk-pagination__title {
   font-size: 20px;
   font-size: 1.25rem;
   line-height: 1.4;
-  display: block;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-pagination__title {
@@ -5666,12 +5802,14 @@
   }
 }
 
+.nhsuk-pagination__page {
+  display: block;
+  text-decoration: underline;
+}
 .nhsuk-pagination__page {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 1.71429;
-  display: block;
-  text-decoration: underline;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-pagination__page {
@@ -5688,10 +5826,6 @@
 }
 
 .nhsuk-panel {
-  font-size: 20px;
-  font-size: 1.25rem;
-  line-height: 1.4;
-  margin-bottom: 16px;
   background: #007f3b;
   border: 4px solid transparent; /* [1] */
   box-sizing: border-box;
@@ -5698,6 +5832,11 @@
   color: #ffffff;
   padding: 28px; /* [2] */
 }
+.nhsuk-panel {
+  font-size: 20px;
+  font-size: 1.25rem;
+  line-height: 1.4;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-panel {
     font-size: 24px;
@@ -5711,6 +5850,9 @@
     line-height: 1.25;
   }
 }
+.nhsuk-panel {
+  margin-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-panel {
     margin-bottom: 24px;
@@ -5732,11 +5874,12 @@
 }
 
 .nhsuk-panel__title {
+  margin-top: 0;
+}
+.nhsuk-panel__title {
   font-size: 32px;
   font-size: 2rem;
   line-height: 1.1875;
-  margin-bottom: 24px;
-  margin-top: 0;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-panel__title {
@@ -5750,6 +5893,9 @@
     font-size: 26pt;
     line-height: 1.15;
   }
+}
+.nhsuk-panel__title {
+  margin-bottom: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-panel__title {
@@ -5762,10 +5908,6 @@
 }
 
 .nhsuk-checkboxes__item {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   clear: left;
   display: block;
   margin-bottom: 8px;
@@ -5772,6 +5914,12 @@
   min-height: 40px;
   padding: 0 0 0 40px;
   position: relative;
+  font-weight: 400;
+}
+.nhsuk-checkboxes__item {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-checkboxes__item {
@@ -5864,14 +6012,16 @@
 }
 
 .nhsuk-checkboxes__divider {
+  color: #212b32;
+  margin-bottom: 8px;
+  text-align: center;
+  width: 40px;
   font-weight: 400;
+}
+.nhsuk-checkboxes__divider {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  color: #212b32;
-  margin-bottom: 8px;
-  text-align: center;
-  width: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-checkboxes__divider {
@@ -5888,11 +6038,13 @@
 }
 
 .nhsuk-checkboxes__conditional {
-  margin-bottom: 16px;
   border-left: 4px solid #4c6272;
   margin-left: 18px;
   padding-left: 30px;
 }
+.nhsuk-checkboxes__conditional {
+  margin-bottom: 16px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-checkboxes__conditional {
     margin-bottom: 24px;
@@ -5907,10 +6059,6 @@
 }
 
 .nhsuk-radios__item {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   clear: left;
   display: block;
   margin-bottom: 8px;
@@ -5917,7 +6065,13 @@
   min-height: 40px;
   padding: 0 0 0 40px;
   position: relative;
+  font-weight: 400;
 }
+.nhsuk-radios__item {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-radios__item {
     font-size: 19px;
@@ -6025,14 +6179,16 @@
 }
 
 .nhsuk-radios__divider {
+  color: #212b32;
+  margin-bottom: 8px;
+  text-align: center;
+  width: 40px;
   font-weight: 400;
+}
+.nhsuk-radios__divider {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  color: #212b32;
-  margin-bottom: 8px;
-  text-align: center;
-  width: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-radios__divider {
@@ -6049,10 +6205,12 @@
 }
 
 .nhsuk-radios__conditional {
-  margin-bottom: 16px;
   border-left: 4px solid #4c6272;
   margin-left: 18px;
   padding-left: 30px;
+}
+.nhsuk-radios__conditional {
+  margin-bottom: 16px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-radios__conditional {
@@ -6068,10 +6226,6 @@
 }
 
 .nhsuk-select {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   background-color: #ffffff;
   border: 2px solid #4c6272;
   box-sizing: border-box;
@@ -6080,6 +6234,12 @@
   min-width: 23ex;
   max-width: 100%;
   padding: 4px;
+  font-weight: 400;
+}
+.nhsuk-select {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-select {
@@ -6127,12 +6287,13 @@
 }
 
 .nhsuk-summary-list {
+  margin: 0;
   font-weight: 400;
+}
+.nhsuk-summary-list {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  margin: 0;
-  margin-bottom: 32px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-summary-list {
@@ -6146,17 +6307,20 @@
     font-size: 13pt;
     line-height: 1.25;
   }
+}
+.nhsuk-summary-list {
+  margin-bottom: 32px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-summary-list {
+    margin-bottom: 40px;
-    display: table;
-    table-layout: fixed;
-    width: 100%;
   }
 }
 @media (min-width: 40.0625em) {
   .nhsuk-summary-list {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
-    margin-bottom: 40px;
   }
 }
 
@@ -6208,8 +6372,8 @@
 }
 
 .nhsuk-summary-list__key {
+  margin-bottom: 4px;
   font-weight: 600;
-  margin-bottom: 4px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-summary-list__key {
@@ -6266,7 +6430,6 @@
 }
 
 .nhsuk-table-container {
-  margin-bottom: 40px;
   display: block;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -6273,6 +6436,9 @@
   overflow-x: auto;
   width: 100%;
 }
+.nhsuk-table-container {
+  margin-bottom: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-table-container {
     margin-bottom: 48px;
@@ -6363,13 +6529,10 @@
 }
 
 .nhsuk-table__panel-with-heading-tab {
+  border: 1px solid #d8dde0;
+  padding-top: 0 !important;
-  margin-bottom: 40px;
-  margin-top: 40px;
-  padding: 24px;
   background-color: #ffffff;
   color: #212b32;
-  border: 1px solid #d8dde0;
-  padding-top: 0 !important;
 }
 .nhsuk-table__panel-with-heading-tab > *:first-child {
   margin-top: 0;
@@ -6376,6 +6539,9 @@
 }
 .nhsuk-table__panel-with-heading-tab > *:last-child {
   margin-bottom: 0;
+}
+.nhsuk-table__panel-with-heading-tab {
+  margin-bottom: 40px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-table__panel-with-heading-tab {
@@ -6382,10 +6548,16 @@
     margin-bottom: 48px;
   }
 }
+.nhsuk-table__panel-with-heading-tab {
+  margin-top: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-table__panel-with-heading-tab {
     margin-top: 48px;
   }
+}
+.nhsuk-table__panel-with-heading-tab {
+  padding: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-table__panel-with-heading-tab {
@@ -6404,9 +6576,6 @@
 }
 
 .nhsuk-table__heading-tab {
-  font-size: 20px;
-  font-size: 1.25rem;
-  line-height: 1.4;
   background-color: #005eb8;
   color: #ffffff;
   display: inline-block;
@@ -6415,6 +6584,11 @@
   position: relative;
   top: -16px;
 }
+.nhsuk-table__heading-tab {
+  font-size: 20px;
+  font-size: 1.25rem;
+  line-height: 1.4;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-table__heading-tab {
     font-size: 24px;
@@ -6538,10 +6712,6 @@
 }
 
 .nhsuk-tag {
-  font-weight: 600;
-  font-size: 14px;
-  font-size: 0.875rem;
-  line-height: 1;
   background-color: rgb(0, 84.6, 165.6);
   border: 1px solid rgb(0, 84.6, 165.6);
   color: #ffffff;
@@ -6553,7 +6723,13 @@
   padding-right: 8px;
   padding-top: 4px;
   text-decoration: none;
+  font-weight: 600;
 }
+.nhsuk-tag {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-tag {
     font-size: 16px;
@@ -6633,14 +6809,15 @@
 }
 
 .nhsuk-task-list {
+  margin-top: 0;
+  padding: 0;
+  list-style-type: none;
   font-weight: 400;
+}
+.nhsuk-task-list {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  margin-top: 0;
-  margin-bottom: 24px;
-  padding: 0;
-  list-style-type: none;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-task-list {
@@ -6654,6 +6831,9 @@
     font-size: 13pt;
     line-height: 1.25;
   }
+}
+.nhsuk-task-list {
+  margin-bottom: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-task-list {
@@ -6695,14 +6875,17 @@
 
 .nhsuk-task-list__status--completed,
 .nhsuk-task-list__status--cannot-start-yet {
-  font-size: 14px;
-  font-size: 0.875rem;
-  line-height: 1;
   padding-bottom: 4px;
   padding-left: 8px;
   padding-top: 6px;
   text-decoration: none;
 }
+.nhsuk-task-list__status--completed,
+.nhsuk-task-list__status--cannot-start-yet {
+  font-size: 14px;
+  font-size: 0.875rem;
+  line-height: 1;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-task-list__status--completed,
   .nhsuk-task-list__status--cannot-start-yet {
@@ -6739,10 +6922,6 @@
 }
 
 .nhsuk-textarea {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   -webkit-appearance: none;
   border: 2px solid #4c6272;
   border-radius: 0;
@@ -6752,6 +6931,12 @@
   padding: 4px;
   resize: vertical;
   width: 100%;
+  font-weight: 400;
+}
+.nhsuk-textarea {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-textarea {
@@ -6778,13 +6963,10 @@
 }
 
 .nhsuk-warning-callout {
+  border: 1px solid #ffeb3b;
+  padding-top: 0 !important;
-  margin-bottom: 40px;
-  margin-top: 40px;
-  padding: 24px;
   background-color: #fff9c4;
   color: #212b32;
-  border: 1px solid #ffeb3b;
-  padding-top: 0 !important;
 }
 .nhsuk-warning-callout > *:first-child {
   margin-top: 0;
@@ -6792,15 +6974,24 @@
 .nhsuk-warning-callout > *:last-child {
   margin-bottom: 0;
 }
+.nhsuk-warning-callout {
+  margin-bottom: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-warning-callout {
     margin-bottom: 48px;
   }
 }
+.nhsuk-warning-callout {
+  margin-top: 40px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-warning-callout {
     margin-top: 48px;
   }
+}
+.nhsuk-warning-callout {
+  padding: 24px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-warning-callout {
@@ -6815,9 +7006,6 @@
 }
 
 .nhsuk-warning-callout__label {
-  font-size: 20px;
-  font-size: 1.25rem;
-  line-height: 1.4;
   background-color: #ffeb3b;
   color: #212b32;
   display: inline-block;
@@ -6825,6 +7013,11 @@
   padding: 8px 32px;
   position: relative;
   top: -16px;
+}
+.nhsuk-warning-callout__label {
+  font-size: 20px;
+  font-size: 1.25rem;
+  line-height: 1.4;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-warning-callout__label {
@@ -6879,7 +7072,6 @@
 
 .nhsuk-tabs {
   margin-top: 4px;
-  margin-bottom: 32px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-tabs {
@@ -6886,6 +7078,9 @@
     margin-top: 4px;
   }
 }
+.nhsuk-tabs {
+  margin-bottom: 32px;
+}
 @media (min-width: 40.0625em) {
   .nhsuk-tabs {
     margin-bottom: 40px;
@@ -6893,12 +7088,14 @@
 }
 
 .nhsuk-tabs__title {
+  color: #212b32;
+  margin-bottom: 8px;
   font-weight: 400;
+}
+.nhsuk-tabs__title {
   font-size: 16px;
   font-size: 1rem;
   line-height: 1.5;
-  color: #212b32;
-  margin-bottom: 8px;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-tabs__title {
@@ -6918,6 +7115,8 @@
   list-style: none;
   margin: 0;
   padding: 0;
+}
+.nhsuk-tabs__list {
   margin-bottom: 32px;
 }
 @media (min-width: 40.0625em) {
@@ -6927,11 +7126,13 @@
 }
 
 .nhsuk-tabs__list-item {
-  font-weight: 400;
-  font-size: 16px;
-  font-size: 1rem;
-  line-height: 1.5;
   margin-left: 32px;
+  font-weight: 400;
+}
+.nhsuk-tabs__list-item {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 1.5;
 }
 @media (min-width: 40.0625em) {
   .nhsuk-tabs__list-item {
@@ -6954,9 +7155,9 @@
 }
 
 .nhsuk-tabs__tab {
-  color: #005eb8;
   display: inline-block;
   margin-bottom: 8px;
+  color: #005eb8;
 }
 .nhsuk-tabs__tab:visited {
   color: #330072;
@@ -7056,11 +7257,13 @@
     top: 0;
   }
   .js-enabled .nhsuk-tabs__panel {
-    margin-bottom: 0;
     background-color: #ffffff;
     border: 1px solid #d8dde0;
     border-top: 0;
     padding: 40px 24px;
+  }
+  .js-enabled .nhsuk-tabs__panel {
+    margin-bottom: 0;
   }
 }
 @media (min-width: 40.0625em) and (min-width: 40.0625em) {