fix: oauth page style error

.stylelintignore

@@ -1,2 +1,3 @@
 .next
 out
+/app/(root)/oauth/components/LoginBanner.module.css

app/(root)/oauth/components/LoginBanner.module.css

@@ -1,4 +1,3 @@
-@import url("@/styles/common.module.css");
 .wrapper {
     display: flex;
     align-items: center;
@@ -7,7 +6,7 @@
     background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-8));
     border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-8));
 
-    @media (max-width: $mantine-breakpoint-sm) {
+    @media (max-width: var(--mantine-breakpoint-sm)) {
         flex-direction: column-reverse;
         padding: var(--mantine-spacing-xl);
     }
@@ -16,7 +15,7 @@
 .body {
     padding-right: calc(var(--mantine-spacing-xl) * 4);
 
-    @media (max-width: $mantine-breakpoint-sm) {
+    @media {
         padding-right: 0;
         margin-top: var(--mantine-spacing-xl);
     }
@@ -42,3 +41,14 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
+
+.loginBannerImage {
+    display: block;
+}
+
+@media (max-width: 770px) {
+    .loginBannerImage {
+        display: none;
+    }
+}
+

app/(root)/oauth/components/LoginBanner.tsx

@@ -42,7 +42,7 @@ export function LoginBanner() {
             <div className={classes.wrapper}>
                 <SimpleGrid cols={{ base: 1, sm: 2 }}>
                     <Container w={256}>
-                        <Image src={image.src} className={classes.image} w="100%" />
+                        <Image src={image.src} className={classes.loginBannerImage} w="100%" />
                     </Container>
                     <div className={classes.body}>
                         <Title className={classes.title}>