<div class="m-imageversions" data-init="test">
	<ul class="m-imageversions__list">
		<li class="m-imageversions__item">
			<h3>Original image (400x400)</h3>
			<img src="media/george.jpg" alt="Original George" />
		</li>
		<li class="m-imageversions__item">
			<h3>Scaled down to 100x50 with default (image center) focus point</h3>
			<img src="media/george_100x50.jpg" alt="Small centered George" />
		</li>
		<li class="m-imageversions__item">
			<h3>Scaled down to 100x50 with (400,400) focus point</h3>
			<img src="media/george_100x50_400,400.jpg" alt="Scaled down George's paws" />
		</li>
		<li class="m-imageversions__item">
			<h3>Scaled up to 600x300 with default (image center) focus point</h3>
			<img src="media/george_600x300.jpg" alt="Large centered George" />
		</li>
		<li class="m-imageversions__item">
			<h3>Scaled up to 600x300 with (0,400) focus point</h3>
			<img src="media/george_600x300_0,400.jpg" alt="Enlarged George's paws" />
		</li>
		<li class="m-imageversions__item">
			<h3>Resized proportionally by only specifying width (300)</h3>
			<img src="media/george_300x300.jpg" alt="George resized by specifying width only" />
		</li>
		<li class="m-imageversions__item">
			<h3>Resized proportionally by only specifying height (200)</h3>
			<img src="media/george_200x200.jpg" alt="George resized by specifying height only" />
		</li>
		<li class="m-imageversions__item">
			<h3>Resized proportionally by only specifying width (150) as a number (shorthand)</h3>
			<img src="media/george_150x150.jpg" alt="George resized by specifying width only (shorthand)" />
		</li>
	</ul>
</div>
