Cleaup, grid replaced with flex for new Wine.vue..

src/components/AllRequestedWines.vue

@@ -1,10 +1,10 @@
 <template>
-  <main>
-    <h1>
-      Alle foreslåtte viner
-    </h1>
+  <main class="container">
+    <h1>Alle foreslåtte viner</h1>
+
     <section class="requested-wines-container">
       <p v-if="wines == undefined || wines.length == 0">Ingen har foreslått noe enda!</p>
+
       <RequestedWineCard v-for="requestedEl in wines" :key="requestedEl.id" :requestedElement="requestedEl" @wineDeleted="filterOutDeletedWine" :showDeleteButton="isAdmin"/>
     </section>
   </main>
@@ -42,39 +42,9 @@ export default {
 @import "../styles/media-queries.scss";
 
 .requested-wines-container{
-  display: grid;
-  grid-gap: 1.5rem;
-  justify-items: center;
-
-  @include mobile {
   display: flex;
-    justify-content: space-around;
-    flex-flow: row wrap;
-    row-gap: 1.5rem;
-    margin: 2rem;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
 }
-
-  @include tablet {
-    margin: 1em;
-    grid: 1fr / 1fr 1fr;
-    justify-items: center;
-  }
-
-  @include desktop {
-    margin: 1em;
-    grid: 1fr / repeat(4, 1fr);
-  }
-
-  @include widescreen {
-    width: 80%;
-    margin: auto;
-    grid: 1fr / repeat(5, 1fr);
-    justify-items: center;
-  }
-}
-
-h1{
-  text-align: center;
-}
-
 </style>