chore: card responsive

src/features/authorization/components/AuthenticationCard.tsx

@@ -1,4 +1,4 @@
-import { Paper } from '@mui/material';
+import { Box, Paper } from '@mui/material';
 import React, { type PropsWithChildren } from 'react';
 
 // Beacuse in the otp verify there is a element outside of the authentication card
@@ -8,8 +8,13 @@ export const AuthenticationCard = ({ children }: PropsWithChildren) => {
       elevation={0}
       sx={{
         borderRadius: 4,
-        p: 6,
-        width: '34.5rem',
+        p: {
+          xs: 4,
+          md: 6,
+        },
+        marginInline: 2,
+        width: (t) => `calc(100% - ${t.spacing(2)})`,
+        maxWidth: '552px',
       }}
     >
       {children}