//
// Image styles //
//
img {
	width: auto;
	max-width: 100%;
	height: auto;
	&[class^='avatar-'] {
		border-radius: 50%;
	}
	&.avatar-xs {
		min-width: 60px;
		width: 60px;
		height: 60px;
	}
	&.avatar-sm {
		min-width: 80px;
		width: 80px;
		height: 80px;
	}
	&.avatar-md {
		min-width: 100px;
		width: 100px;
		height: 100px;
	}
	&.avatar-lg {
		min-width: 120px;
		width: 120px;
		height: 120px;
	}
	&.avatar-xl {
		min-width: 140px;
		width: 140px;
		height: 140px;
	}
	&.avatar-2xl {
		min-width: 160px;
		width: 160px;
		height: 160px;
	}
	&.avatar-3xl {
		min-width: 180px;
		width: 180px;
		height: 180px;
	}
}

.fancy-image {
	position: relative;
	img {
		@include transform(translate(6px, -6px));
		@include transition(ease-out 0.2s);
	}
	&:before {
		content: '';
		position: absolute;
		top: 6px;
		left: -6px;
		background: $color-dark-01;
		width: 100%;
		height: 100%;
	}
	&.left {
		img {
			@include transform(translate(-6px, -6px));
		}
		&:before {
			left: 6px;
		}
	}
}