Bring some responsive styles, subject to later improvements

src/components/Grid.vue

@@ -21,7 +21,20 @@ export default {
 <style scoped lang="less">
 .grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr;
   column-gap: 1rem;
+  row-gap: 1.5rem;
+
+  @media screen and (min-width: @sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  @media screen and (min-width: @md) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  @media screen and (min-width: @lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 }
 </style>

src/components/GridItem.vue

@@ -1,10 +1,19 @@
 <template>
   <article class="grid-item">
     <router-link :to="`/fruit/${item.id}`">
-      <img :src="item.image" :alt="item.name" />
-      <h2>{{ item.name }}</h2>
-      <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
-      <p class="price">{{ item.price + "$" }}</p>
+      <div class="thumbnail">
+        <img :src="item.image" :alt="item.name" />
+      </div>
+      <section>
+        <h3>
+          {{ item.name }}
+          <span class="tag" :style="{ backgroundColor: item.color }">{{ item.taste }}</span>
+        </h3>
+
+        <hr />
+
+        <p class="price">{{ "$" + item.price }}</p>
+      </section>
     </router-link>
   </article>
 </template>
@@ -19,33 +28,68 @@ export default {
 
 <style scoped lang="less">
 .grid-item {
-  padding: 1rem;
+  border-radius: 10px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
 
-  h2 {
-    text-transform: capitalize;
+  &:hover .thumbnail img {
+    transform: scale(1.1);
   }
 
-  .tag {
-    font-weight: bold;
-    text-transform: lowercase;
-    display: inline-block;
-    color: #ffffff;
-    padding: 0.35rem;
-    min-width: 85px;
-    border-radius: 25px;
-  }
+  a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
 
-  img {
-    width: 100%;
-    height: 350px;
-    object-fit: cover;
-    max-width: 100%;
-  }
+    .thumbnail {
+      height: 285px;
+      overflow: hidden;
+      box-shadow: 0 1px 4px 1px #d2d2f2;
 
-  .price {
-    font-size: 24px;
-    font-weight: bold;
+      img {
+        border-radius: 10px 10px 0 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        max-width: 100%;
+        transition: transform 0.4s ease-in-out;
+      }
+    }
+
+    section {
+      padding: 1.5rem 1rem;
+
+      h3 {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 0.55rem;
+      }
+
+      hr {
+        width: 100px;
+        color: #cece;
+        margin: 1.35rem auto;
+      }
+
+      .tag {
+        border-radius: 25px;
+        padding: 0.55rem;
+        margin-left: 0.75rem;
+        color: #ffffff;
+        font-size: 14px;
+        font-weight: bold;
+        text-align: center;
+        text-transform: lowercase;
+      }
+
+      .price {
+        text-align: center;
+        margin: 0;
+        font-size: 28px;
+        font-weight: bold;
+      }
+    }
   }
 }
 </style>

src/components/Header.vue

@@ -19,12 +19,20 @@ nav {
   padding: 0.5rem;
   box-shadow: 0 19px 34px -15px #d2d2f2;
 
+  h1 {
+    margin: 0;
+    font-size: 28px;
+    font-weight: lighter;
+  }
+
   &.main-nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: calc(58px - 0.5rem * 2);
+    z-index: 15;
+
     img {
       width: 35px;
       height: 35px;