[wip] Switch from Anime to Motion One for page animations

src/style/molecules/_photo-card.scss

@@ -1,26 +1,28 @@
 .photo-card {
-    & > * {
-        border-radius: 8px;
-    }
     a {
         display: block;
         overflow: hidden;
         cursor: zoom-in;
+        border-radius: 8px;
         box-shadow: 0 16px 12px rgba(#000, 0.15), 0 26px 52px rgba(#000, 0.2);
         transition: transform 0.7s var(--ease-quart);
+        transform: translateZ(0);
         will-change: transform;
     }
+
+    // Image
     :global(picture) {
         width: 100%;
         height: 100%;
         background: $color-primary-tertiary20;
-    }
-    :global(img) {
-        display: block;
-        width: calc(100% + 2px);
-        height: calc(100% + 2px);
-        object-fit: cover;
-        transition: opacity 0.7s var(--ease-quart);
+
+        :global(img) {
+            display: block;
+            width: calc(100% + 2px);
+            height: calc(100% + 2px);
+            object-fit: cover;
+            transition: opacity 0.7s var(--ease-quart);
+        }
     }
 
     // Informations
@@ -92,7 +94,8 @@
         transition: opacity 0.8s var(--ease-quart);
     }
 
-    // Slightly zoom in and show info on hover
+
+    // Slightly zoom in, show gradient and info on hover
     @media (hover: hover) {
         a:hover {
             transform: scale(1.0375) rotate(2deg) translateZ(0);
@@ -109,6 +112,7 @@
                     transition-delay: 180ms;
                 }
             }
+
             &:after {
                 opacity: 1;
             }

src/style/organisms/_collage.scss

@@ -20,12 +20,15 @@
         height: 100%;
         margin-left: auto;
         margin-right: auto;
-        transform: rotate(var(--rotation)) translateZ(0);
 
         @include bp (sm) {
             height: clamp(156px, 18vw, 400px);
         }
 
+        & > :global(*) {
+            transform: rotate(var(--rotation)) translateZ(0);
+        }
+
         // First row
         // Mobile: Top left
         &:nth-child(1) {

src/style/pages/_photos.scss

@@ -254,7 +254,6 @@
 ** Filters
 */
 .filters {
-    position: relative;
     max-width: 982px;
     margin: 0 auto;
     padding: 0 16px;
@@ -265,6 +264,7 @@
 
     // Bar
     &__bar {
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -364,7 +364,7 @@
 
         @include bp (sm) {
             position: absolute;
-            left: 64px;
+            left: 32px;
             top: 52%;
             transform: translateY(-50%);
             margin-bottom: 0;