feat: 랜딩페이지 320 유연화 (#345)

Author: game240

src/components/landing/CardsContent.scss

@@ -63,7 +63,7 @@
   }
   @include r.media-small-mobile {
     padding: 15px 24px;
-    width: 280px;
+    width: 87.5%; // 280px
     height: 159px;
   }
 }
@@ -167,7 +167,7 @@
     width: 440px;
   }
   @include r.media-small-mobile {
-    width: 280px;
+    width: 87.5%; // 280px
     height: 50px;
   }
 }

src/components/landing/CardsContent.tsx

@@ -92,14 +92,11 @@ const CardsContent: React.FC<CardsContentProps> = ({
 
   return isOpened ? (
     <div
-      className=" cards-wrap d-flex"
+      className="cards-wrap flex justify-center"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <div
-        id="opened"
-        className=" cards-content f-dir-column j-content-between"
-      >
+      <div id="opened" className="cards-content f-dir-column j-content-between">
         {/* 배경 이미지용 div */}
         <div
           className={`background-image   ${showPhoto ? "visible" : ""}`}
@@ -172,7 +169,7 @@ const CardsContent: React.FC<CardsContentProps> = ({
     </div>
   ) : (
     <div
-      className="cards-wrap d-flex"
+      className="cards-wrap flex justify-center"
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}

src/components/landing/Page3Cards.scss

@@ -63,5 +63,7 @@
   }
   @include r.media-small-mobile {
     gap: 20px;
+
+    width: 100vw;
   }
 }

src/pages/MainVer2Page2.scss

@@ -37,6 +37,13 @@
     justify-self: center;
     gap: 25px;
   }
+  @include r.media-small-mobile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+  }
 }
 
 .main-ver2 .page2 .page2-content {
@@ -58,7 +65,7 @@
     height: 231px;
   }
   @include r.media-small-mobile {
-    width: 280px;
+    width: 87.5%; // 280px
     height: 160px;
   }
   & {