Switch header sizes for ZHA pairing status card (#8078)

Since the top title shows the result of the previous step ("Interview
Complete", "Configuration Complete", etc), while the second title shows
the current step ("Configuring", "Initializing", etc), having the top
title bigger would draw attention to it. So a user could see
"Configuration Complete" and assume pairing is done.

This change makes the second title bigger than the top one, so that the
user focus on the step that is in progress.

src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts

@@ -49,19 +49,17 @@ class ZHADevicePairingStatusCard extends LitElement {
         class="discovered ${classMap({
           initialized: this.device.pairing_status === INITIALIZED,
         })}"
-        ><div
-          class="header"
-        >
-          <h1>
+        ><div class="header">
+          <h4>
             ${this.hass!.localize(
               `ui.panel.config.zha.device_pairing_card.${this.device.pairing_status}`
             )}
-          </h1>
-          <h4>
+          </h4>
+          <h1>
             ${this.hass!.localize(
               `ui.panel.config.zha.device_pairing_card.${this.device.pairing_status}_status_text`
             )}
-          </h4>
+          </h1>
         </div>
         <div class="card-content">
           ${[INTERVIEW_COMPLETE, CONFIGURED].includes(