added style for display in one row for twolines elements

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -156,7 +156,15 @@
     font-size: 38px;
 }
 
+.gamemode__lines {
+    display: flex;
+    flex-direction: column;
+}
 
+.gamemode__twolines {
+    display: flex;
+    align-items: flex-start;
+}
 
 .gamemode__firstline {
     background: #EF4444;
@@ -213,7 +221,7 @@
     background: #EF4444;
     filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
     border-radius: 40px;
-    width: 60%;
+    width: 55%;
     height: 50%;
     margin: 18px 36px 0 35px;
 }
@@ -226,7 +234,7 @@
 }
 
 .gamemode__twoline--first__element .linecontent-3 h3 {
-    padding-left: 15%;
+    padding-left: 5%;
     text-align: center;
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -247,4 +255,10 @@
     padding: 20px 20px;
 }
 
+.gamemode__twoline--two__element {
+    border-radius: 40px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
 /* /GameMode */

luckydiamond/src/pages/HomePage.vue

@@ -58,6 +58,7 @@
               </li>
             </ul>
           </div>
+          <div class="gamemode__twolines">
             <div class="gamemode__twoline--first__element">
               <ul>
                 <li
@@ -77,13 +78,18 @@
             <div class="gamemode__twoline--two__element">
               <ul>
                 <li
-                  v-for="mode in two"
+                    v-for="mode in twolinetwoelementGameMode"
+                    :key="mode.id"
                 >
+                  <div :class="'linecontent' + mode.id">
+                    <h3>{{ mode.title }}</h3>
+                  </div>
                 </li>
               </ul>
             </div>
           </div>
         </div>
+        </div>
     </section>
   </div>
 </template>