From 3c636d9859f4c0b95432fb76e1e5a4a890b7f0b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 12 Jul 2022 13:15:24 +0200
Subject: [PATCH] Fix responsive issues (mainly Safari)

---
 src/style/atoms/_button-cart.scss  | 5 +++--
 src/style/organisms/_carousel.scss | 4 +++-
 src/style/pages/_credits.scss      | 2 +-
 src/style/pages/_homepage.scss     | 6 +++++-
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/style/atoms/_button-cart.scss b/src/style/atoms/_button-cart.scss
index 9764b22..7cad5a0 100644
--- a/src/style/atoms/_button-cart.scss
+++ b/src/style/atoms/_button-cart.scss
@@ -9,13 +9,14 @@
 
     :global(button) {
         overflow: visible;
+        padding: 0;
     }
 
     // Icon
     :global(svg) {
         display: block;
-        width: min(65%, 27px);
-        height: min(65%, 27px);
+        width: min(65%, 22px);
+        height: min(65%, 22px);
         margin-top: -3px;
         color: #fff;
     }
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index 7066019..212ada0 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -3,12 +3,13 @@
     overflow: hidden;
     border-radius: 6px;
     background: $color-primary-tertiary20;
+    transform: translateZ(0);
 
     // Slides
     &__slides {
         display: flex;
     }
-    & :global(picture) {
+    :global(picture) {
         position: relative;
         flex: 0 0 100%;
         color: $color-text;
@@ -58,6 +59,7 @@
             padding: 0;
             overflow: hidden;
             box-shadow: 0 1px 1px $color-shadow, 0 2px 2px $color-shadow;
+            transform: translateZ(0);
 
             &:after {
                 content: "";
diff --git a/src/style/pages/_credits.scss b/src/style/pages/_credits.scss
index b19d0aa..4e2f085 100644
--- a/src/style/pages/_credits.scss
+++ b/src/style/pages/_credits.scss
@@ -6,7 +6,7 @@
         color: $color-tertiary;
         text-align: center;
 
-        @include bp (sm) {
+        @include bp (md) {
             margin: 160px 0;
         }
 
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index a33e3f4..6f554e6 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -1,8 +1,11 @@
+:global(.homepage) {
+    overflow: hidden;
+}
+
 // Homepage
 .homepage {
     // Intro Section
     &__intro {
-        overflow: hidden;
         padding-bottom: calc(96px + 20vw);
         background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
         color: $color-text;
@@ -81,6 +84,7 @@
     // Photos Collage
     &__photos {
         position: relative;
+        width: 100%;
         max-width: 2000px;
         margin: calc(-1 * 96px - 4vw) 0 80px;