[wip] Add hover effect on Shop Poster component

src/style/molecules/_poster.scss

@@ -1,6 +1,7 @@
 .poster {
     position: relative;
     border-radius: 6px;
+    overflow: hidden;
     max-width: 326px;
 
     @include bp (sm) {
@@ -12,40 +13,48 @@
         display: block;
         width: 100%;
         height: auto;
+        box-shadow:
+            0 6px 6px rgba(#000, 0.08),
+            0 12px 12px rgba(#000, 0.08),
+            0 24px 24px rgba(#000, 0.08);
+        border-radius: 4px;
+        transition: transform 0.8s var(--ease-quart), border-radius 0.8s var(--ease-quart);
     }
 
     .buttons {
         display: flex;
         margin-top: 40px;
         justify-content: center;
+        // opacity: 0;
+        transform: translate3d(0, 48px, 0);
+        transition: transform 0.8s var(--ease-quart), opacity 0.4s var(--ease-quart);
 
         @include bp (sm) {
             position: absolute;
             align-items: center;
-            justify-content: space-between;
+            justify-content: center;
             bottom: 14px;
             left: 10%;
             right: 10%;
-            // margin: 0 10% 28px;
-            white-space: nowrap;
         }
 
         a {
             margin-right: 8px;
             margin-left: 8px;
-
+            text-align: center;
-            @include bp (sm) {
-                margin: 0;
-            }
         }
     }
 
+    // Hover effect
     &:hover {
         img {
             transform: scale(0.8) translate3d(0, -5%, 0);
+            border-radius: 8px;
         }
         .buttons {
-            display: flex;
+            opacity: 1;
+            transform: translate3d(0,0,0);
+            // transition-delay: 50ms;
         }
     }