[wip] Rework Shop

- Change strategy for content fetching
- Add a route per page instead of using __layout for all
- Change the behaviors of the posters section (add a carousel on small screens)
- Change Poster buttons styling and make interactions only for desktop

src/style/molecules/_notification-cart.scss

@@ -6,6 +6,7 @@
     align-items: center;
     overflow: hidden;
     cursor: pointer;
+    pointer-events: auto;
 
     // Left Image
     &__left {

src/style/molecules/_poster.scss

@@ -4,7 +4,7 @@
     overflow: hidden;
     max-width: 326px;
 
-    @include bp (sm) {
+    @include bp (md) {
         background-color: $color-primary-tertiary20;
         max-width: 600px;
     }
@@ -33,12 +33,10 @@
     // Buttons
     .buttons {
         display: flex;
-        margin-top: 40px;
+        margin-top: 32px;
         justify-content: center;
-        transform: translate3d(0, 100%, 0);
-        transition: transform 0.8s var(--ease-quart);
 
-        @include bp (sm) {
+        @include bp (md) {
             position: absolute;
             z-index: 1;
             bottom: 4.25%;
@@ -46,19 +44,43 @@
             width: 100%;
             align-items: center;
             justify-content: center;
+            margin-top: 40px;
+            transform: translate3d(0, 100%, 0);
+            transition: transform 0.8s var(--ease-quart);
         }
 
-        a {
-            margin: 0 clamp(4px, 0.3vw, 8px);
-            text-align: center;
+        & > * {
+            background: none;
+            font-size: rem(14px);
+            font-weight: 300;
+            color: $color-tertiary;
+            padding: 0;
+
+            &:first-child {
+                margin-right: 12px;
+
+                &:hover {
+                    background: none;
+                }
+            }
+            &:last-child {
+                display: inline-flex;
+                align-items: center;
+                height: 30px;
+                padding: 0 12px;
+                color: $color-secondary;
+                border: 1px solid rgba($color-secondary, 0.4);
+            }
         }
     }
 
     // Hover effect
     &:hover {
         img {
-            transform: scale(0.8) translate3d(0, -5%, 0);
-            border-radius: 8px;
+            @include bp (md) {
+                transform: scale(0.8) translate3d(0, -5%, 0);
+                border-radius: 8px;
+            }
         }
         .buttons {
             transform: translate3d(0,0,0);