// Main container for edge-optimized images
.edge-images-container {
	display: block;
	position: relative;
	max-width: var(--wp--style--global--content-size, var(--max-width, 100%));
	content-visibility: var(--content-visibility);
	contain-intrinsic-size: var(--width) var(--height);
	align-content: center;
	justify-items: center;

	img {
		display: block;
		max-width: 100%;
		max-height: 100%;
		height: auto;
		border-radius: inherit; // Inherit the border radius from the container
		
		// SVGs are a sometimes headache.
		&[src$=".svg"] {
			height: 100%;
			aspect-ratio: auto;
		}
		
	}
	
	&.contain {
		img {
			object-fit: contain;
		}
	}
	
	&.cover {
		img {
			object-fit: cover;
		}
	}
}