From 9de5aa16c94783d283bc83bcfee9ebec43037b1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 15 Dec 2021 22:32:58 +0100
Subject: [PATCH] [wip] Fix Shop posters layout on larger screens

---
 src/style/molecules/_poster.scss   | 12 +++++
 src/style/pages/shop/_posters.scss | 74 ++++++++++++------------------
 2 files changed, 41 insertions(+), 45 deletions(-)

diff --git a/src/style/molecules/_poster.scss b/src/style/molecules/_poster.scss
index 8282639..8d2dbc4 100644
--- a/src/style/molecules/_poster.scss
+++ b/src/style/molecules/_poster.scss
@@ -70,6 +70,18 @@
                 padding: 0 12px;
                 color: $color-secondary;
                 border: 1px solid rgba($color-secondary, 0.4);
+
+                @include bp (md) {
+                    border: none;
+                    color: #fff;
+                    background: $color-secondary;
+                }
+
+                &:hover {
+                    @include bp (md) {
+                        background-color: darken($color-secondary, 7);
+                    }
+                }
             }
         }
     }
diff --git a/src/style/pages/shop/_posters.scss b/src/style/pages/shop/_posters.scss
index 669229f..544bbe3 100644
--- a/src/style/pages/shop/_posters.scss
+++ b/src/style/pages/shop/_posters.scss
@@ -60,25 +60,14 @@
             @include bp (mob-lg) {
                 margin: 0 -12px;
             }
-
-            // @include bp (sm) {
-            //     grid-column: 2 / span 22;
-            // }
-            // @include bp (mob-lg) {
-            //     --gap: 32px;
-            //     display: grid;
-            //     grid-template-columns: repeat(2, 1fr);
-            //     gap: var(--gap);
-            // }
             @include bp (md) {
-                --gap: 32px;
+                --gap: clamp(32px, 2.5vw, 48px);
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 gap: var(--gap);
                 margin: 0;
             }
             @include bp (sd) {
-                --gap: 48px;
                 grid-template-columns: repeat(4, 1fr);
             }
         }
@@ -95,43 +84,38 @@
             @include bp (sm) {
                 flex: 0 0 calc(50% - 24px);
             }
-            // margin: 0 auto auto;
-
-            // 2 columns
-            // &:nth-child(2n + 1) {
-            //     @include bp (sm, max) {
-            //         margin-top: calc(var(--gap) * 2);
-            //     }
-            // }
+            @include bp (md) {
+                margin: 0 auto auto;
+            }
 
             // 3 columns
-            // &:nth-child(3n + 1) {
-            //     @include bp (sd, max) {
-            //         margin-top: calc(var(--gap) * 2);
-            //     }
-            // }
-            // &:nth-child(3n + 2) {
-            //     @include bp (sd, max) {
-            //         margin-top: var(--gap);
-            //     }
-            // }
+            &:nth-child(1) {
+                @include bp (sd, max) {
+                    margin-top: calc(var(--gap) * 2);
+                }
+            }
+            &:nth-child(2) {
+                @include bp (sd, max) {
+                    margin-top: var(--gap);
+                }
+            }
 
             // 4 columns
-            // &:nth-child(4n + 1) {
-            //     @include bp (sd) {
-            //         margin-top: 64px * 3;
-            //     }
-            // }
-            // &:nth-child(4n + 2) {
-            //     @include bp (sd) {
-            //         margin-top: 64px * 2;
-            //     }
-            // }
-            // &:nth-child(4n + 3) {
-            //     @include bp (sd) {
-            //         margin-top: 64px;
-            //     }
-            // }
+            &:nth-child(4n + 1) {
+                @include bp (sd) {
+                    margin-top: 64px * 3;
+                }
+            }
+            &:nth-child(4n + 2) {
+                @include bp (sd) {
+                    margin-top: 64px * 2;
+                }
+            }
+            &:nth-child(4n + 3) {
+                @include bp (sd) {
+                    margin-top: 64px;
+                }
+            }
         }
 
         // Pagination