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

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

	&.full-bleed,
	&[src*="#full-bleed"] {
		margin-right: calc((-100vw + 100%) / 2);
		margin-left: calc((-100vw + 100%) / 2);
		width: 100vw;
		max-width: 100vw;
	}

	&.start,
	&.end,
	&[src*="#start"],
	&[src*="#end"] {
		margin: 0;
		width: 30%;

		@media only screen and (max-width: 720px) {
			float: none;
			margin-inline-start: 0;
			margin-inline-end: 0;
			width: 100%;
		}
	}

	&.start,
	&[src*="#start"] {
		float: left;
		transform-origin: left;
		margin-inline-end: 1rem;

		:root[dir*="rtl"] & {
			float: right;
			transform-origin: right;
		}
	}

	&.end,
	&[src*="#end"] {
		float: right;
		transform-origin: right;
		margin-inline-start: 1rem;

		:root[dir*="rtl"] & {
			float: left;
			transform-origin: left;
		}
	}

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

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

img {
	transition: var(--transition-longer);

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

		&:hover {
			transform: scale(1.1);
			z-index: 1;
			box-shadow: var(--shadow-raised);
			border-radius: 0;
		}

		&.start,
		&.end,
		&[src*="#start"],
		&[src*="#end"] {
			&:hover {
				transform: scale(1.6);
			}

			@media only screen and (max-width: 720px) {
				transform-origin: unset;

				&:hover {
					transform: scale(1.1);
				}
			}
		}

		&.transparent,
		&[src*="#transparent"] {
			&:hover {
				box-shadow: none;
			}
		}
	}
}