@layer vendor {
	.progressive-image-container {
		display: block;
		width: var(--img-width-xl,
			var(--img-width-lg,
			var(--img-width-md,
			var(--img-width-sm,
			var(--img-width-xs,
			var(--img-width))))));
		aspect-ratio: var(--img-aspect-xl,
			var(--img-aspect-lg,
			var(--img-aspect-md,
			var(--img-aspect-sm,
			var(--img-aspect-xs,
			var(--img-aspect))))));
		position: relative;
		overflow: hidden;
	}

/* xs: 0px */
@media (max-width: 640px) {
		.progressive-image-container {
			width: var(--img-width-xs, var(--img-width));
			aspect-ratio: var(--img-aspect-xs, var(--img-aspect));
		}
	}

/* sm: 640px */
@media (min-width: 640px) {
		.progressive-image-container {
			width: var(--img-width-sm, var(--img-width-xs, var(--img-width)));
			aspect-ratio: var(--img-aspect-sm, var(--img-aspect-xs, var(--img-aspect)));
		}
	}

/* md: 768px */
@media (min-width: 768px) {
		.progressive-image-container {
			width: var(--img-width-md, var(--img-width-sm, var(--img-width-xs, var(--img-width))));
			aspect-ratio: var(--img-aspect-md, var(--img-aspect-sm, var(--img-aspect-xs, var(--img-aspect))));
		}
	}

/* lg: 1024px */
@media (min-width: 1024px) {
		.progressive-image-container {
			width: var(--img-width-lg, var(--img-width-md, var(--img-width-sm, var(--img-width-xs, var(--img-width)))));
			aspect-ratio: var(--img-aspect-lg, var(--img-aspect-md, var(--img-aspect-sm, var(--img-aspect-xs, var(--img-aspect)))));
		}
	}

/* xl: 1280px */
@media (min-width: 1280px) {
		.progressive-image-container {
			width: var(--img-width-xl, var(--img-width-lg, var(--img-width-md, var(--img-width-sm, var(--img-width-xs, var(--img-width))))));
			aspect-ratio: var(--img-aspect-xl, var(--img-aspect-lg, var(--img-aspect-md, var(--img-aspect-sm, var(--img-aspect-xs, var(--img-aspect))))));
		}
	}

}