.as-image-box {
	position: relative;
	z-index: 1;
	height: 100%;
	--bg-offset-x: 2;
	--bg-offset-y: 2;
	--bg-offset-scale: 1em;
	
}
.as-image-box img {
	display: block;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}
.as-image-box::before {
	content:'';
	position: absolute;
	z-index: -1;
	width: calc(var(--bg-size-w) * 1%);
	height: calc(var(--bg-size-h) * 1%);
	background: red;
	transform: translate(
		calc(var(--bg-offset-x) * var(--bg-offset-scale)),
		calc(var(--bg-offset-y) * var(--bg-offset-scale))
	);
}
.as-image-box.bg-blue::before {
	background-color: rgb(0, 73, 118);
}
.as-image-box.bg-bluegrey::before {
	background-color: rgb(120,147,156);
}
.as-image-box.bg-mediumbluegrey::before {
    background-color:rgb(214,223,225);
}
.as-image-box.bg-lightblue::before {
	background-color: rgba(0,73,118,0.05);
}
.as-image-box.bg-white::before {
	background-color: rgba(255,255,255);
}
.as-image-box.position-right_bottom::before {
	right:0; bottom:0;
}
.as-image-box.position-right_top::before {
	right:0; top:0;
}
.as-image-box.position-left_bottom::before {
	left:0; bottom:0;
}
.as-image-box.position-left_top::before {
	left:0; top:0;
}