Improved <img> centering on mobile devices

src/styles/_imageview.scss

@@ -17,11 +17,11 @@
 	// ImageView -------------------------------------------------------------- //
 	#image {
 		position: absolute;
-		top: 30px;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		transition: top .3s;
+		top: 60px;
+		right: 30px;
+		bottom: 30px;
+		left: 30px;
+		transition: top .3s, right .3s, bottom .3s, left .3s;
 		will-change: transform;
 
 		display: flex;
@@ -31,10 +31,19 @@
 		animation-name: zoomIn;
 		animation-duration: .3s;
 		animation-timing-function: $timingBounce;
+
+		@media (max-width: 640px) {
+			right: 20px;
+			bottom: 20px;
+			left: 20px;
+		}
 	}
 
 	&.full #image {
 		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
 	}
 
 	#image > div {
@@ -43,17 +52,12 @@
 	}
 
 	#image img {
-		max-width: calc(100vw - 60px);
-		max-height: calc(100vh - 90px);
+		position: absolute;
+		max-width: 100%;
+		max-height: 100%;
 		width: auto;
 		height: auto;
 		transform: translate(-50%, -50%);
-		transition: max-width .3s, max-height .3s;
-	}
-
-	&.full #image img {
-		max-width: 100vw;
-		max-height: 100vh;
 	}
 
 	// Previous/Next Buttons -------------------------------------------------------------- //
@@ -67,6 +71,10 @@
 
 		&--next { right: 0; }
 
+		@media (max-width: 640px) {
+			display: none;
+		}
+
 		a {
 			position: fixed;
 			top: 50%;

src/styles/_mediaquery.scss

@@ -1,7 +0,0 @@
-@media only screen and (max-width: 640px) {
-
-	#imageview .arrow_wrapper {
-		display: none !important;
-	}
-
-}

src/styles/main.scss

@@ -78,4 +78,3 @@ input {
 @import 'loading';
 @import 'message';
 @import 'multiselect';
-@import 'mediaquery';