responsived

frontend/components/profile/notifications/notification.vue

@@ -6,14 +6,16 @@
     >
         <div class="flex flex-col gap-2">
             <div class="flex items-center gap-3">
-                <Icon name="bi:info-circle" size="20" />
-                <h3 class="typo-sub-h-md font-semibold">تغییر وضعیت سفارش</h3>
+                <Icon name="bi:info-circle" class="lg:text-lg" />
+                <h3 class="max-lg:text-sm font-semibold">تغییر وضعیت سفارش</h3>
                 |
-                <span class="typo-p-xs text-cyan-500 font-semibold">
+                <span class="text-xs text-cyan-500 font-semibold">
                     ۲۳ تیر
                 </span>
             </div>
-            <p class="typo-p-sm text-slate-700 text-justify">
+            <p
+                class="text-xs lg:text-sm leading-[175%] text-slate-700 text-justify"
+            >
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
                 استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
                 در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد