img {
	--img-x: center;
	--img-y: center;

	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: var(--img-x) var(--img-y);
}

img.rounded,
.img-rounded {
	border-radius: var(--border-radius-blocks);
}

img.circle,
.img-circle {
	border-radius: 100%;
	aspect-ratio: 1 / 1 !important;
}

.img-circle > img {
	height: 100%;
	width: 100%;
}

.img-rounded,
.img-circle {
	overflow: hidden;
}

.img-square,
.img-square > img {
	aspect-ratio: 1 / 1 !important;
}

.img-square > img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.icon-container {
	height: 100%;
	width: 100%;

	max-width: 48px;
	max-height: 48px;
}

.img-left-container {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;

	justify-content: flex-start;
	align-items: center;
}

.img-boxed {
	border-radius: var(--border-radius-blocks);
	box-shadow: 0 .7rem 1rem rgba(0, 0, 0, 0.15);
}

/*
	Modes
*/
.img-contain,
.img-contain img {
	object-fit: contain !important;
}

.img-cover,
.img-cover img {
	object-fit: cover !important;
}

.img-fill,
.img-fill img {
	object-fit: fill !important;
}

/*
	Position
*/
.img-left {
	--img-x: left !important;
}

.img-center {
	--img-x: center !important;
}

.img-right {
	--img-x: right !important;
}

.img-bottom {
	--img-y: bottom !important;
}

.img-middle {
	--img-y: center !important;
}

.img-top {
	--img-y: top !important;
}

/* 
    Hover 
*/
@media (-moz-touch-enabled: 0), (pointer: fine) {
	.img-rounded,
	.img-rounded > img,
	.img-circle,
	.img-circle > img {
		transition-property: all !important;
		transition: 0.2s ease-in-out;
	}

	.img-rounded:hover > img,
	.img-circle:hover > img {
		scale: 1.1;
	}
}