Don't use !important in media styles

content/demo/index.md

@@ -195,7 +195,7 @@ Variables should be comma-separated and be inside the brackets.
 {{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
 <figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption>
 
-Alternatively, you can append the following url anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
+Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
 
 - `#full`: Forces image/video to be full-width.
 - `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.

sass/_media.scss

@@ -1,17 +1,3 @@
-img {
-	transition: var(--transition-longer);
-
-	&:not(.no-hover, &[src*="#no-hover"]) {
-		cursor: zoom-in;
-
-		&:hover {
-			transform: scale(1.1);
-			box-shadow: var(--shadow-raised);
-			border-radius: 0;
-		}
-	}
-}
-
 img,
 video {
 	display: block;
@@ -34,9 +20,26 @@ video {
 	&[src*="#transparent"] {
 		box-shadow: none;
 		border-radius: 0;
+	}
+}
+
+img {
+	transition: var(--transition-longer);
+
+	&:not(.no-hover, &[src*="#no-hover"]) {
+		cursor: zoom-in;
 
 		&:hover {
-			box-shadow: none !important;
+			transform: scale(1.1);
+			box-shadow: var(--shadow-raised);
+			border-radius: 0;
+		}
+
+		&.transparent,
+		&[src*="#transparent"] {
+			&:hover {
+				box-shadow: none;
+			}
 		}
 	}
 }