img {
	transition-duration: var(--transition-longer);
	transition-property: transform, box-shadow, border-radius;

	&:not(.no-hover, &[src*="#no-hover"]) {
		cursor: zoom-in;
	}

	&:not(.no-hover, &[src*="#no-hover"]):hover {
		transform: scale(1.1);
		box-shadow: var(--shadow-raised);
		border-radius: 0;
	}
}

img,
video {
	display: block;
	margin: 1rem auto;
	box-shadow: var(--shadow);
	border-radius: var(--rounded-corner);
	max-width: 100%;

	&.full,
	&[src*="#full"] {
		width: 100%;
	}

	&.pixels,
	&[src*="#pixels"] {
		image-rendering: pixelated;
	}

	&.transparent,
	&[src*="#transparent"] {
		box-shadow: none;
		border-radius: 0;

		&:hover {
			box-shadow: none;
		}
	}
}