Improved gallery adaptive design, optimized and improved image details page

MyWebsite/wwwroot/css/Gallery.css

@@ -1,19 +1,20 @@
 .gallery img {
     object-fit: cover;
-    max-height: 200px;
+    max-height: 300px;
     max-width: 100%;
     margin: 2px;
     transition: .25s;
 }
 .gallery img:hover {
     filter: brightness(125%);
-    transform: scale(1.25);
+    transform: scale(1.1);
 }
 
 .image-overview-block img {
     max-height: 50vh;
     max-width: 100%;
     float: left;
+    cursor: zoom-in;
 }
 .image-overview-block div {
     display: inline-block;
@@ -21,4 +22,14 @@
 }
 .image-overview-block h1 {
     margin-bottom: 0px;
+}
+
+@media only screen and (max-width: 600px) {
+    .gallery img {
+        max-height: none;
+    }
+    .gallery img:hover {
+        filter: brightness(125%);
+        transform: none;
+    }
 }

MyWebsite/wwwroot/js/site.js

@@ -16,10 +16,12 @@ function ToggleImageSize()
     {
         image.style.maxHeight = "50vh";
         image.style.maxWidth = "100%";
+        image.style.cursor = "zoom-in";
     }
     else
     {
         image.style.maxHeight = "none";
         image.style.maxWidth = "none";
+        image.style.cursor = "zoom-out";
     }
 }