WIP

src/style/molecules/_photo.scss

@@ -1,13 +1,14 @@
 .photo {
 
-    // Location
+    /*
+    ** Location
+    */
     &__location {
         margin-bottom: 32px;
 
         @include breakpoint (sm) {
             margin-bottom: 56px;
         }
-
         @include breakpoint (xs) {
             padding: 0;
         }
@@ -26,7 +27,10 @@
         }
     }
 
-    // Image container
+
+    /*
+    ** Image
+    */
     &__image {
         position: relative;
         display: flex;
@@ -40,17 +44,18 @@
         .align {
             position: relative;
             max-width: 1180px;
-            padding: 0;
             margin: 0;
+            padding: 0;
         }
 
         // Image container
         &--img {
+            overflow: hidden;
             position: relative;
             z-index: 2;
-            overflow: hidden;
             border-radius: 0;
-            box-shadow: 0 8px 18px rgba(#715E4E, .2);
+            box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
+            user-select: none;
 
             @include breakpoint (sm) {
                 border-radius: 8px;
@@ -62,14 +67,6 @@
                 height: auto;
             }
 
-            // Cursor
-            .cursor {
-                position: absolute;
-                z-index: 4;
-                top: 0;
-                left: 0;
-            }
-
             // Overlay
             &:after {
                 content: "";
@@ -84,7 +81,7 @@
                 background-color: $color-primary;
                 display: block;
                 z-index: 3;
-                transition: all 200ms ease-in-out;
+                transition: all 150ms ease-in-out;
             }
         }
 
@@ -94,7 +91,7 @@
 
             // Hover
             &:hover {
-                cursor: none;
+                cursor: url(#{$dir-img}/icons/zoom.svg) 0 0, pointer;
 
                 .photo__image--img:after {
                     opacity: 0.6;
@@ -105,10 +102,10 @@
         // Date (on the side)
         &--date {
             display: block;
-            color: $color-lightgray;
-            font-size: rem(14px);
             margin-top: 16px;
-            padding: 0 8vw;
+            padding: 0 pxVW(128);
+            font-size: rem(14px);
+            color: $color-lightgray;
 
             @include breakpoint (sm) {
                 position: absolute;
@@ -126,20 +123,23 @@
         // Photo number
         &--number {
             position: absolute;
-            pointer-events: none;
-            font-family: $font-serif-extra;
-            color: rgba($color-tertiary, .5);
-            font-size: rem(124px);
             bottom: -80px;
             right: 24px;
+            font-family: $font-serif-extra;
+            color: rgba($color-tertiary, 0.5);
+            font-size: rem(124px);
+            pointer-events: none;
+            user-select: none;
 
             @include breakpoint (sm) {
-                font-size: 18.75vw;
+                font-size: pxVW(300);
                 left: 92%;
                 top: 50%;
                 z-index: 1;
                 transform: translate(-50%, -50%);
-
+            }
+            @include breakpoint (xxl) {
+                font-size: rem(300px);
             }
         }
     }