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-container {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
	overflow: hidden;
}

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);
}


/*
	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;
}


/*
	Image Label
*/
.image-label {
	display: block;
	color: var(--color-grey);
	font-family: var(--heading-font);
	font-size: 1.6rem;
	font-weight: 900;
	line-height: 1.1;
	text-wrap: balance;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
	padding-left: clamp(1.5rem, 3vw, 3rem);
	border-left: .3rem solid var(--color-primary);
	margin-top: 1.5rem; 
}

.grid > :last-child > .image-label {
	padding-left: 0;
	padding-right: clamp(1.5rem, 3vw, 3rem);
	text-align: right;
	border-left: none;
	border-right: .3rem solid var(--color-primary);
}

@media (min-width: 576px) {
	.image-label {
		font-size: 1.7rem;
		margin-top: 2rem; 
	}
}
@media (min-width: 768px) {
	.image-label {
		font-size: 1.8rem;
		margin-top: 2.5rem; 
	}
}
@media (min-width: 1024px) {
	.image-label {
		font-size: 1.9rem;
		margin-top: 3rem; 
	}
}
@media (min-width: 1280px) {
	.image-label {
		font-size: 2rem;
		margin-top: 4rem; 
	}
}
@media (min-width: 1540px) {
	.image-label {
		font-size: 2.1rem;
		margin-top: 5rem; 
	}
}

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

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