From 12967b0c17643898a89d3f5f36b0914f4c8d55b9 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:12:31 -0700
Subject: [PATCH] h3 typography on small screens, h2 on medium-large screens
 (#10939)

---
 .../angular/anon-layout/anon-layout.component.html  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html
index 39570dabc8b..6603fa970d4 100644
--- a/libs/auth/src/angular/anon-layout/anon-layout.component.html
+++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html
@@ -13,9 +13,16 @@
       <bit-icon [icon]="icon"></bit-icon>
     </div>
 
-    <h1 *ngIf="title" bitTypography="h3" class="tw-mt-2 sm:tw-text-2xl">
-      {{ title }}
-    </h1>
+    <ng-container *ngIf="title">
+      <!-- Small screens -->
+      <h1 bitTypography="h3" class="tw-mt-2 sm:tw-hidden">
+        {{ title }}
+      </h1>
+      <!-- Medium to Larger screens -->
+      <h1 bitTypography="h2" class="tw-mt-2 tw-hidden sm:tw-block">
+        {{ title }}
+      </h1>
+    </ng-container>
     <div *ngIf="subtitle" class="tw-text-sm sm:tw-text-base">{{ subtitle }}</div>
   </div>