fix styling and use new Wine slots

src/ui/Wine.vue

@@ -10,8 +10,8 @@
     </div>
 
     <div class="wine-details">
-      <h2 v-if="wine.name">{{ wine.name }}</h2>
-      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }} rating</span>
+      <span v-if="wine.name" class="wine-name">{{ wine.name }}</span>
+      <span v-if="wine.rating"><b>Rating:</b> {{ wine.rating }}</span>
       <span v-if="wine.price"><b>Pris:</b> {{ wine.price }} NOK</span>
       <span v-if="wine.country"><b>Land:</b> {{ wine.country }}</span>
     </div>
@@ -66,8 +66,8 @@ export default {
 @import "./src/styles/variables";
 
 .wine {
-  padding: 2rem;
-  margin: 1rem 0rem;
+  padding: 1rem;
+  box-sizing: border-box;
   position: relative;
   -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
   -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
@@ -76,13 +76,13 @@ export default {
   @include tablet {
     width: 250px;
     height: 100%;
-    margin: 1rem 2rem;
   }
 }
 
 .wine-image {
   display: flex;
   justify-content: center;
+  margin-top: 10px;
 
   img {
     height: 250px;
@@ -97,6 +97,7 @@ export default {
   }
 }
 
+
 .wine-details {
   display: flex;
   flex-direction: column;
@@ -106,6 +107,11 @@ export default {
   }
 }
 
+.wine-name{
+  font-size: 20px;
+  margin: 1em 0;
+}
+
 .wine-details {
   display: flex;
   flex-direction: column;