.webauthn__no-js {
  .js-enabled & {
    display: none;
  }
}

.webauthn__api-missing {
  display: none;

  .js-enabled & {
    display: block;
  }

  .js-enabled.webauthn-api-enabled & {
    display: none;
  }
}

.webauthn__api-required {
  display: none;

  .webauthn-api-enabled & {
    display: block;
  }
}

.webauthn-illustration {

  @include govuk-media-query($from: tablet) {
    margin: govuk-spacing(9) auto 0 auto;
    padding: 0;
  }

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: govuk-spacing(6) auto 0 auto;
  padding: 0 govuk-spacing(9) 0 govuk-spacing(9);

}

.webauthn__no-js {
  .js-enabled & {
    display: none;
  }
}

.webauthn__api-missing {
  display: none;

  .js-enabled & {
    display: block;
  }

  .js-enabled.webauthn-api-enabled & {
    display: none;
  }
}

.webauthn__api-required {
  display: none;

  .webauthn-api-enabled & {
    display: block;
  }
}

.webauthn-illustration {

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: govuk-spacing(6) auto 0 auto;
  padding: 0 govuk-spacing(9) 0 govuk-spacing(9);

  @include govuk-media-query($from: tablet) {
    margin: govuk-spacing(9) auto 0 auto;
    padding: 0;
  }

}

Put media query after default CSS
Put media query after default CSS

Specificity means that the media query will always override, but this is
more obvious with the order this way around.
