src/components/MyWallet/WalletBox.jsx

@@ -10,7 +10,7 @@ export default function WalletBox({ wallet, payment }) {
   return (
     <div className="my-wallet-wrapper w-full mb-10">
       <div className="main-wrapper w-full">
-        <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
+        <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-[22rem]">
           {loading ? (
             <div className="w-full h-full flex items-center justify-center">
               <LoadingSpinner size="16" color="sky-blue" />

src/components/MyWallet/WalletItemCard.jsx

@@ -42,13 +42,13 @@ export default function WalletItemCard({ walletItem, payment }) {
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
         <div className="wallet w-full flex justify-between items-start gap-3">
-          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          <div className="min-w-[100px] min-h-[100px] max-w-[150px] max-h-[150px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
             <img
               src={localImgLoad(`images/currency/${image}`)}
               className="w-full h-full"
@@ -60,7 +60,7 @@ export default function WalletItemCard({ walletItem, payment }) {
               <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
                 Current Balance
               </p>
-              <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+              <p className="text-[44px] lg:text-[62px] font-bold text-white tracking-wide leading-10 xxs:scale-100 lg:scale-100 xl:scale-125">
                 {PriceFormatter(
                   walletItem.amount * 0.01,
                   walletItem.code,
@@ -72,9 +72,9 @@ export default function WalletItemCard({ walletItem, payment }) {
           </div>
         </div>
 
-        <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
+        <p className="text-lg text-white tracking-wide flex justify-center items-center gap-8">
           HOLDINGS :{' '}
-          <span className="mt-1">
+          <span className="xxs:scale-100 lg:scale-100 xl:scale-125">
             {PriceFormatter(
               walletItem.escrow * 0.01,
               walletItem.code,