Object fit and object position

<div class="row">
	<div class="col-xl-9">
		<p class="mb-4"><code>.object-contain</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="img/image_placeholder.svg" class="object-contain w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-cover</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="img/image_placeholder.svg" class="object-cover w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-fill</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="img/image_placeholder.png" class="object-fill w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-none</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="img/image_placeholder.svg" class="object-none w-100" alt="object contain example" style="height: 50px;">
		</div>

		<p class="mb-4"><code>.object-scale-down</code></p>
		<div class="border overflow-hidden rounded bg-default mb-32">
			<img src="img/image_placeholder.svg" class="object-scale-down w-100" alt="object contain example" style="height: 50px;">
		</div>
	</div>
</div>

<div class="row mb-48">
	<div class="col text-center">
		<p class="mb-4"><code>.object-bottom</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-bottom mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-center</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-center mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-top</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-top mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
</div>

<div class="row mb-48">
	<div class="col text-center">
		<p class="mb-4"><code>.object-left</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-left mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-left-bottom</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-left-bottom mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-left-top</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-left-top mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
</div>

<div class="row">
	<div class="col text-center">
		<p class="mb-4"><code>.object-right</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-right mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-right-bottom</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-right-bottom mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
	<div class="col text-center">
		<p class="mb-4"><code>.object-right-top</code></p>
		<div class="overflow-hidden">
			<img src="img/image_placeholder.svg" class="object-none border rounded bg-default object-right-top mx-auto" alt="object contain example" style="height: 96px; width: 96px; ">
		</div>
	</div>
</div>