cards are rendered in a stack

backend/db/data-generator/index.js

 
         var mediaArray = []
         for (let i=0; i < 3; i++) {
-            
+            mediaArray.push(random.media())
         }
-
-        user.user_media = random.media()
+        user.user_media = mediaArray
     })
     console.log('COMPLETED: Generated Users...')
     return users

backend/db/data-generator/random.js

     }
     return str
 }
-const randomMedia = max => {
+const randomMedia = () => {
     const stockimg = [
         'https://i.imgur.com/a4wirDS.png',
         'https://i.imgur.com/F6GxGXG.jpeg',
         'https://i.imgur.com/rOjRCgo.jpeg',
         'https://i.imgur.com/FwSdQww.jpeg',
         'https://i.imgur.com/JjZyzXL.jpeg',
-
+        'https://i.imgur.com/1DsSQ1s.jpeg',
     ]
     return randomValFrom(stockimg)
 }

frontend/src/components/ProfileCardList.vue

             :key='profile.profile_id'
             @throwout='swipped(profile)'
             v-for='profile in profiles'
+            :style='{ "left": `vh` }'
         )
             .card.b-solid.rounded.p-0.bg-cover(
                 :style='{ "background-image": `url(${profile.user.user_media})` }'
 </template>
 
 <script>
-
-
 export default {
     name: 'ProfileCardList',
     props: {
 }
 </script>
 <style lang="postcss">
-.profile_card_list_container
+@import '../sss/card.scss'
+
+.profile_card_list
     display: flex
     justify-content: center
     margin: 5vh 0 0 0
+    position: relative
+
+
+.profile_card_list_container
+    margin: 0 auto
+    width: 30%
+    position: relative
+    .swipe
+        list-style: none
+        background: #fff
+        box-shadow: 0 0 2px rgba(0,0,0,.2), 1px 1px 1px rgba(0,0,0,.2)
+        position: absolute
+        line-height: 300px
+        text-align: center
+        border: 1px solid #ECECEC
+        border-radius: 8px
+        
 
 .swipe
     
     max-width: 85vw
     height: 50vh
     background-position: center
-    border-radius: 3vh
     border: 1px solid #fff
     &_content
         width: 100%

frontend/src/sss/card.scss

+$n: 100;
+$cardbase: 2px;
+$cardtop: -1px;
+$index: 9999;
+
+@for $i from 0 through $n {
+  .swipe:nth-child(#{$i}) {
+    position: absolute;
+    left: calc($cardbase * $i);
+    top: calc($cardtop * $i);
+    z-index: calc($index - $i);
+  }
+}
+
+
+.swipe .card h3 {
+    color: blue!important;
+}