From 52e65ed8df78d3b5a701eee907c4eadc23b67e6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 20 Feb 2020 19:02:40 +0100
Subject: [PATCH] Photos styling fixes

---
 src/style/molecules/_photo.scss  |  9 +++++----
 src/style/organisms/_photos.scss | 21 ++++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/style/molecules/_photo.scss b/src/style/molecules/_photo.scss
index 8483ef2..c196753 100644
--- a/src/style/molecules/_photo.scss
+++ b/src/style/molecules/_photo.scss
@@ -6,12 +6,12 @@
     &__location {
         margin-bottom: 32px;
 
+        @media (max-width: $screen-md) {
+            padding: 0;
+        }
         @include breakpoint (sm) {
             margin-bottom: 56px;
         }
-        @include breakpoint (xs) {
-            padding: 0;
-        }
 
         h2 {
             text-align: left;
@@ -57,6 +57,7 @@
             display: block;
             width: 100%;
             border-radius: 0;
+            background-color: #fff;
             box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
             user-select: none;
 
@@ -95,7 +96,7 @@
 
             // Hover
             &:hover {
-                cursor: url(#{$dir-img}/icons/zoom.svg) 0 0, pointer;
+                cursor: url(#{$dir-img}/icons/zoom.svg) 6 8, pointer;
 
                 .photo__image--img:after {
                     opacity: 0.6;
diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss
index b34672e..86bf489 100644
--- a/src/style/organisms/_photos.scss
+++ b/src/style/organisms/_photos.scss
@@ -31,11 +31,8 @@
             @include breakpoint (md) {
                 position: sticky;
                 z-index: 10;
-                top: 16px;
-                height: 100%;
-            }
-            @include breakpoint (xl) {
                 top: 32px;
+                height: 100%;
             }
         }
 
@@ -56,7 +53,9 @@
     .photo {
         position: relative;
         z-index: 4;
-        margin-bottom: 104px;
+        margin-bottom: 88px;
+        // transition: transform 1000ms $ease-quart, opacity 1000ms $ease-quart;
+        // will-change: transform, opacity;
 
         @include breakpoint (sm) {
             margin-bottom: 120px;
@@ -66,6 +65,12 @@
         &:last-child {
             margin-bottom: 0;
         }
+
+        // Hidden photo
+        // &.hidden {
+        //     opacity: 0;
+        //     translate: translate(0, 10%) scale(0.92);
+        // }
     }
 
 
@@ -108,8 +113,10 @@
 
             // Number
             &__image--number {
-                transform: translate(-50%, var(--translate));
-                will-change: transform;
+                @include breakpoint (sm) {
+                    transform: translate(-50%, var(--translate));
+                    will-change: transform;
+                }
             }
         }