main.site figure.image {
	margin: 26px auto;
	display: block;
}

main.site figure.image[data-img-size] {
	--scale: 0.0;
}
main.site figure.image[data-img-size="large"] {
	--scale: 1.0;
}
main.site figure.image[data-img-size="medium"] {
	--scale: 0.5;
}
main.site figure.image[data-img-size="small"] {
	--scale: 0.35;
}

main.site figure.image[data-img-ratio] div.img-wrapper {
	--scaled-size: calc(var(--width-content-base) * var(--scale));
	--max-scaled-size: calc(var(--max-width-content) * var(--scale));
}

main.site figure.image[data-img-ratio="16/9"] div.img-wrapper {
	width: var(--scaled-size);
	max-width: var(--max-scaled-size);
	height: calc(var(--scaled-size) * 9.0 / 16.0);
	max-height: calc(var(--max-scaled-size) * 9.0 / 16.0);
}
main.site figure.image[data-img-ratio="4/3"] div.img-wrapper {
	width: var(--scaled-size);
	max-width: var(--max-scaled-size);
	height: calc(var(--scaled-size) * 3.0 / 4.0);
	max-height: calc(var(--max-scaled-size) * 3.0 / 4.0);
}
main.site figure.image[data-img-ratio="1/1"] div.img-wrapper {
	width: calc(var(--scaled-size) * 3.0 / 4.0);
	max-width: calc(var(--max-scaled-size) * 3.0 / 4.0);
	height: calc(var(--scaled-size) * 3.0 / 4.0);
	max-height: calc(var(--max-scaled-size) * 3.0 / 4.0);
}
main.site figure.image[data-img-ratio="3/4"] div.img-wrapper {
	width: calc(var(--scaled-size) * 3.0 / 4.0);
	max-width: calc(var(--max-scaled-size) * 3.0 / 4.0);
	height: var(--scaled-size);
	max-height: var(--max-scaled-size);
}


@media only screen and (max-width: 1800px) {

	main.site figure.image[data-img-ratio] div.img-wrapper {
		--scaled-size: calc(var(--width-content-1800) * var(--scale));
	}

}

@media only screen and (max-width: calc(5 * 164px + 106.5px + 63.5px)) { /* n * var(--tab-width), where n numer of pages plus sports plus some tolerance */

	main.site figure.image[data-img-size="medium"] {
		--scale: 0.6;
	}
	main.site figure.image[data-img-size="small"] {
		--scale: 0.4;
	}

	main.site figure.image[data-img-ratio] div.img-wrapper {
		--scaled-size: calc(var(--width-content-swap) * var(--scale));
	}

}

@media only screen and (max-width: 600px) {

	main.site figure.image[data-img-size="medium"] {
		--scale: 0.8;
	}
	main.site figure.image[data-img-size="small"] {
		--scale: 0.6;
	}

	main.site figure.image[data-img-ratio] div.img-wrapper {
		--scaled-size: calc(var(--width-content-600) * var(--scale));
	}

}

/* 360px - 412px is the mobile phone width range */
@media only screen and (max-width: 420px) {

	main.site figure.image[data-img-size="medium"] {
		--scale: 1.0;
	}
	main.site figure.image[data-img-size="small"] {
		--scale: 1.0;
	}

}