From 4a793b49af0b1c9c66361b5285346362f9602a21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 5 Oct 2021 23:10:33 +0200
Subject: [PATCH] Fix some responsive issues on Photos page

---
 src/style/pages/_photos.scss | 38 ++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index 897753e..3250192 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -9,9 +9,9 @@
 
         // Title
         h1 {
+            margin-top: -20px;
             color: $color-secondary;
             line-height: 1;
-            margin-top: -20px;
 
             @include bp (sm) {
                 margin-top: -100px;
@@ -19,7 +19,7 @@
         }
         // Text
         p {
-            max-width: 350px;
+            max-width: 456px;
             margin: 20px auto 56px;
 
             @include bp (sm) {
@@ -34,7 +34,11 @@
         position: relative;
         max-width: 982px;
         margin: 0 auto;
-        padding: 0 32px;
+        padding: 0 16px;
+
+        @include bp (sm) {
+            padding: 0 32px;
+        }
 
         // Span
         &__label {
@@ -54,13 +58,17 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 72px;
+            min-height: 64px;
             margin: 20px 0;
-            padding: 0 22px;
+            padding: 0 12px;
             background: $color-primary-darker;
             border-radius: 50vh;
 
+            @include bp (mob-lg) {
+                padding: 0 16px;
+            }
             @include bp (sm) {
+                height: 72px;
                 padding: 28px 32px;
             }
 
@@ -72,20 +80,26 @@
             }
             li {
                 display: block;
-                margin: 8px 10px;
-                font-size: rem(16px);
+                margin: 8px 2px;
+                font-size: rem(14px);
                 color: #fff;
 
                 @include bp (sm) {
                     margin: 0 2px;
+                    font-size: rem(16px);
                 }
             }
             .icon {
+                display: block;
+                width: 20px;
+                height: 20px;
                 fill: #fff;
                 margin-right: 12px;
                 transition: fill 0.2s;
 
                 @include bp (sm) {
+                    width: 26px;
+                    height: 26px;
                     margin-right: 16px;
                 }
             }
@@ -94,11 +108,15 @@
                 position: relative;
                 display: flex;
                 align-items: center;
-                padding: 8px 16px;
+                padding: 8px 12px 8px 8px;
                 font-weight: 900;
                 border-radius: 100vh;
                 transition: background-color 0.2s;
 
+                @include bp (sm) {
+                    padding: 8px 16px;
+                }
+
                 select {
                     opacity: 0;
                     position: absolute;
@@ -149,6 +167,7 @@
 
             // Reset link
             .reset {
+                margin-right: 16px;
                 padding: 0;
                 color: rgba($color-tertiary, 0.6);
                 font-weight: 900;
@@ -169,7 +188,6 @@
                 background-color: $color-tertiary;
                 padding: 0 16px;
                 border-radius: 50vh;
-                margin-left: 16px;
             }
         }
     }
@@ -333,7 +351,7 @@
             margin: 24px 0 48px;
 
             @include bp (sm) {
-                grid-column: span 4;
+                grid-column: span 5;
                 grid-row: 1;
                 text-align: left;
                 margin: 0;