From 4a59b150db4e74037d7c53ec9c9efa2201a757e6 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Wed, 29 Nov 2023 15:33:12 +0300
Subject: [PATCH] refactor template home-mobile

---
 .../css/PagesStyles/adaptive-pages/homemobile.css   | 12 +++++++++++-
 .../src/pages/adaptive-pages/HomemobilePage.vue     | 13 +++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
index 1ca9b8a..236edb1 100644
--- a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
@@ -102,7 +102,9 @@ body {
 
 .main-mobile__content {
     display: flex;
+    align-items: center;
     justify-content: center;
+    flex-direction: column;
 }
 
 .bg-mobile {
@@ -113,7 +115,15 @@ body {
     height: 105px;
 }
 
-.card-mobile__content {
+.main-mobile__first-line {
+    display: flex;
+}
+
+.main-mobile__two-line {
+    display: flex;
+}
+
+.card-mobile__content { /* text display */
     display: flex;
     flex-direction: column;
     justify-content: space-around;
diff --git a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
index cfc84d9..543e343 100644
--- a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
@@ -20,16 +20,21 @@
     </header>
     <main class="main-mobile">
       <div class="main-mobile__content">
-        <div class="main-mobile__first-line" v-for="mode in firstlineGameMode" :key="mode">
-          <div class="card-mobile__content bg-mobile card-first">
+        <div class="main-mobile__first-line">
+          <div class="card-mobile__content bg-mobile card-first" v-for="mode in firstlineGameMode" :key="mode">
             <h2>{{ mode.title }}</h2>
             <div class="card-mobile__btn">
               <a href="#">Play ></a>
             </div>
           </div>
         </div>
-        <div class="main-mobile__two-line" v-for="mode in twolineGameMode" :key="mode">
-          <h1>1</h1>
+        <div class="main-mobile__two-line">
+          <div class="card-mobile__content bg-mobile card-two" v-for="mode in twolineGameMode" :key="mode">
+            <h2>{{ mode.title }}</h2>
+            <div class="card-mobile__btn">
+              <a href="#">Play ></a>
+            </div>
+          </div>
         </div>
       </div>
     </main>