Better image carousel

site.css

@@ -118,10 +118,44 @@ a:hover {
     z-index: 100;
 }
 
+.BigPicture-viewport {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.BigPicture-track {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    touch-action: pan-y;
+    will-change: transform;
+}
+
+.BigPicture-track.is-dragging {
+    cursor: grabbing;
+}
+
+.BigPicture-frame {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    max-width: 100%;
+    padding: 20px;
+    width: 100%;
+    touch-action: pan-y;
+}
+
+.BigPicture-frame.is-dragging {
+    cursor: grabbing;
+}
+
 .BigPicture img {
     transition-duration: 0.2s;
-    transition-timing-function: ease-in-quart;
-    transition-property: height, width;
+    transition-timing-function: ease-in-out;
+    transition-property: height, width, opacity;
 }
 
 .BigPicture-footer {