feat(cxl-ui): [cxl-certificate-header] update styles

packages/cxl-ui/scss/cxl-certificate-header.scss

@@ -35,6 +35,7 @@
   }
 
   .title {
+    font-size: var(--lumo-font-size-xxl);
     margin: 0;
   }
 

packages/cxl-ui/src/components/cxl-certificate-header.js

@@ -5,6 +5,7 @@ import { customElement, property } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';
 import '@conversionxl/cxl-ui/src/components/cxl-section.js';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js';
 
 import cxlCertificateHeaderStyles from '../styles/cxl-certificate-header-css.js';
 import cxlCertificateHeaderGlobalStyles from '../styles/global/cxl-certificate-header-css.js';
@@ -27,16 +28,31 @@ export class CXLCertificateHeaderElement extends LitElement {
 
   @property({ type: Boolean, attribute: 'hide-credential' }) hideCredential = false;
 
+  @property({ type: Boolean, reflect: true })
+  wide;
+
+  _wideMediaQuery = '(min-width: 528px)';
+
+  constructor() {
+    super();
+
+    this.addController(
+      new MediaQueryController(this._wideMediaQuery, (matches) => {
+        this.wide = matches;
+      })
+    );
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _renderCompletedEmblem() {
     if (!this.theme.includes('completed')) {
       return nothing;
     }
 
-    return html`<h2 class="completed">
+    return html`<h3 class="completed">
       <span class="completed-icon"><vaadin-icon icon="lumo:checkmark"></vaadin-icon></span>
-      Training completed
-    </h2>`;
+      Certificate earned
+    </h3>`;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -77,7 +93,7 @@ export class CXLCertificateHeaderElement extends LitElement {
             ${this._renderStats()}
             ${this._renderActions()}
           </div>
-          ${this._renderCredential()}
+          ${this.wide ? this._renderCredential() : nothing}
         </div>
       </cxl-section>
     `;