From 8810dfb19782db1763253750c503d0fd1b2eaa3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Oct 2021 17:30:31 +0200
Subject: [PATCH] Fix Locations continents filters centering and sizing

---
 src/style/molecules/_location.scss  |  8 ++++++--
 src/style/organisms/_locations.scss | 14 ++++++++------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/style/molecules/_location.scss b/src/style/molecules/_location.scss
index 4a7b848..1b53b2a 100644
--- a/src/style/molecules/_location.scss
+++ b/src/style/molecules/_location.scss
@@ -8,10 +8,10 @@
 
     a {
         display: flex;
-        align-items: center;
         text-decoration: none;
 
         @include bp (sm) {
+            align-items: center;
             flex-direction: column;
             justify-content: center;
             padding: 24px;
@@ -55,11 +55,12 @@
     &__flag {
         img {
             display: block;
-            margin: 0 auto;
+            margin: 2px auto 0;
             border-radius: 100%;
             margin-right: 24px;
 
             @include bp (sm) {
+                margin-top: 0;
                 margin-right: 0;
             }
         }
@@ -78,6 +79,9 @@
 
         @include bp (sm) {
             margin: 20px 0 8px;
+            font-size: rem(40px);
+        }
+        @include bp (sd) {
             font-size: rem(48px);
         }
     }
diff --git a/src/style/organisms/_locations.scss b/src/style/organisms/_locations.scss
index 81843d0..e2fbca3 100644
--- a/src/style/organisms/_locations.scss
+++ b/src/style/organisms/_locations.scss
@@ -1,6 +1,5 @@
 .browse {
     margin: 96px 0;
-    text-align: center;
 
     @include bp (sm) {
         margin-bottom: 128px;
@@ -25,10 +24,9 @@
 
     // Continents
     &__continents {
-        display: inline-flex;
+        display: flex;
         justify-content: center;
-        text-align: center;
-        margin: 0 auto;
+        pointer-events: none;
 
         &:hover {
             li {
@@ -38,6 +36,7 @@
         li {
             display: block;
             margin: 0 8px;
+            pointer-events: auto;
             transition: opacity 0.6s var(--ease-quart);
 
             &:hover {
@@ -64,7 +63,7 @@
             justify-content: center;
             grid-gap: 24px 24px;
             width: 85%;
-            padding: 0;
+            padding: 0 24px;
         }
         @include bp (sm) {
             display: flex;
@@ -72,6 +71,9 @@
             width: 100%;
             margin-top: 104px;
         }
+        @include bp (sd) {
+            padding: 0;
+        }
 
         li {
             display: block;
@@ -80,7 +82,7 @@
             @include bp (mob-lg) {
                 margin-bottom: 0;
             }
-            @include bp (sm) {
+            @include bp (sd) {
                 margin: 0 22px 56px;
             }
         }