.lazy--img {
	position: relative;
	overflow: hidden;
	display: block;
}

.lazy--background {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	height: 100%;
}

.lazy--background .lazyload,
.lazy--background .lazyloading,
.lazy--background .lazyloaded {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	width: 100%;
	object-fit: cover;
	object-position: 50%;
	font-family: "object-fit: cover;";
	height: 100%;
}

/* IE11 */
.lazysizes-display-clone {
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50%;
	font-family: "object-fit: cover;";
}

@keyframes lazyloading {
	0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 50% 0%;
	}
}

.lazy__placeholder {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: absolute;
	height: 100%;
	transition: opacity 1s ease-in, background-size 2s ease-in;
	will-change: opacity;
	pointer-events: none;
	background: linear-gradient(
		0deg,
		theme("colors.blue.700") 0%,
		theme("colors.blue.400") 100%,
		theme("colors.blue.400") 150%,
		theme("colors.blue.700") 200%
	);
	background-size: 100% 100%;
}

.lazy__placeholder[src] {
	object-fit: cover;
}

.lazyloading + .lazy__placeholder,
.lazyloaded + .lazy__placeholder {
	background-size: 400% 400%;
	animation: lazyloading 10s ease-in-out infinite;
}

.lazyload + .lazy__placeholder {
	opacity: 1;
}

.lazyloaded + .lazy__placeholder {
	opacity: 0;
}