Focuspoint in tandem with "object-fit" & "object-position"

gistfile1.txt

<!-- FocusPoint can also be used in tandem with css-settings "object-fit" & "object-position". For example useful for a fullscreen-hero, when you don't know how the aspect-ratio of the viewport might look. The example below shows a portrait-, landscape, or 4:3 "square" image depending on the aspect-ratio it is shown. Even if the general rule is not to relay, which picture the browser might pick from the picture-element, it seems to work pretty well. Or in other words: pseudo media-queries in picture-element und css-media query match in praxis pretty well. -->
<picture>
		<%-- 8:5 is like macbook pro display--%>
		<source media="(min-width: 640px) and (min-aspect-ratio: 8/5)"
			srcset="$SlideImage.FocusFillMax(640,400).URL 640w">
		<%-- 5:8 is portrait --%>
		<source media="(min-width: 400px) and (max-aspect-ratio: 5/8)"
				srcset="$SlideImage.FocusFillMax(400,640).URL 720w">
		<%-- 4:3 say desktop --%>
		<source media="(min-width: 640px) and (min-aspect-ratio: 4/3)"
				srcset="$SlideImage.FocusFillMax(640,480).URL 640w">
		<img src="$SlideImage.FocusFillMax(640,480).URL" alt="$Title" id="hero-image-{$ID}">
	</picture>
	<style type="text/css">
		#hero-image-{$ID} {
			object-position: {$SlideImage.FocusFillMax(640,480).PercentageX}% {$SlideImage.FocusFillMax(640,480).PercentageY}%;
		}
		@media screen and (max-aspect-ratio: 5/8) {
			#hero-image-{$ID} {
				object-position: {$SlideImage.FocusFillMax(400,640).PercentageX}% {$SlideImage.FocusFillMax(400,640).PercentageY}%;
			}
		}
		@media screen and (min-aspect-ratio: 8/5) {
			#hero-image-{$ID} {
				object-position: {$SlideImage.FocusFillMax(640,400).PercentageX}% {$SlideImage.FocusFillMax(640,400).PercentageY}%;
			}
		}
	</style>