Ensure components use public media query mixin

We wrap the media query (mq) library with `govuk-media-query` so we can change it in the future.

I think these may have been missed out when we originally did that work:
#763

There is no impact on users that I'm aware of, so this is just a tidy up.

src/govuk/components/footer/_footer.scss

@@ -114,15 +114,15 @@
 
  .govuk-footer__meta-item--grow {
  flex: 1; // Support: Flexbox
- @include mq ($until: tablet) {
+ @include govuk-media-query ($until: tablet) {
  flex-basis: 320px; // Support: Flexbox
  }
  }
 
  .govuk-footer__licence-logo {
  display: inline-block;
  margin-right: govuk-spacing(2);
- @include mq ($until: desktop) {
+ @include govuk-media-query ($until: desktop) {
  margin-bottom: govuk-spacing(3);
  }
  vertical-align: top;
@@ -167,7 +167,7 @@
  .govuk-footer__heading {
  @include govuk-responsive-margin(7, "bottom");
  padding-bottom: govuk-spacing(4);
- @include mq ($until: tablet) {
+ @include govuk-media-query ($until: tablet) {
  padding-bottom: govuk-spacing(2);
  }
  border-bottom: 1px solid $govuk-footer-border;
@@ -189,15 +189,15 @@
  // Ensure columns take up equal width (typically one-half:one-half)
  flex-grow: 1; // Support: Flexbox
  flex-shrink: 1; // Support: Flexbox
- @include mq ($until: desktop) {
+ @include govuk-media-query ($until: desktop) {
  // Make sure columns do not drop below 200px in width
  // Will typically result in wrapping, and end up in a single column on smaller screens.
  flex-basis: 200px; // Support: Flexbox
  }
  }
 
  // If there are only two sections, set the layout to be two-third:one-third on desktop
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  // We match the first section with `:first-child`.
  // To ensure the section is one of two, we can count backwards using `:nth-last-child(2)`.
  .govuk-footer__section:first-child:nth-last-child(2) {
@@ -212,7 +212,7 @@
  column-gap: $govuk-gutter; // Support: Columns
  }
 
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  .govuk-footer__list--columns-2 {
  column-count: 2; // Support: Columns
  }

src/govuk/components/header/_header.scss

@@ -138,7 +138,7 @@
  @include govuk-responsive-margin(2, "bottom");
  padding-right: govuk-spacing(8);
 
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  width: 33.33%;
  padding-right: $govuk-gutter-half;
  float: left;
@@ -147,7 +147,7 @@
  }
 
  .govuk-header__content {
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  width: 66.66%;
  padding-left: $govuk-gutter-half;
  float: left;
@@ -180,7 +180,7 @@
  margin-left: govuk-spacing(1);
  }
 
- @include mq ($from: tablet) {
+ @include govuk-media-query ($from: tablet) {
  top: govuk-spacing(3);
  }
  }
@@ -202,14 +202,14 @@
  .js-enabled {
  .govuk-header__menu-button {
  display: block;
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  display: none;
  }
  }
 
  .govuk-header__navigation {
  display: none;
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  display: block;
  }
  }
@@ -221,7 +221,7 @@
 
 
  .govuk-header__navigation--end {
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  margin: 0;
  padding: govuk-spacing(1) 0;
  text-align: right;
@@ -236,7 +236,7 @@
  padding: govuk-spacing(2) 0;
  border-bottom: 1px solid $govuk-header-nav-item-border-color;
 
- @include mq ($from: desktop) {
+ @include govuk-media-query ($from: desktop) {
  display: inline-block;
  margin-right: govuk-spacing(3);
  padding: govuk-spacing(1) 0;

src/govuk/components/radios/_radios.scss

@@ -147,7 +147,7 @@
  // =========================================================
 
  .govuk-radios--inline {
- @include mq ($from: tablet) {
+ @include govuk-media-query ($from: tablet) {
  @include govuk-clearfix;
 
  .govuk-radios__item {