//------------------------------------------------------------------------------------------------
// IMAGES
//------------------------------------------------------------------------------------------------

/*
[1] Fluid images for responsive purposes.
[2] Offset `alt` text from surrounding copy.
[3] Setting `vertical-align` removes the whitespace that appears under 'img'
or 'svg' elements when they are dropped into a page as-is.
[4] Rather than distorting, the image will crop itself to maintain aspect ratio.
[5] Fixes some browser defaults which make SVGs invisible by default.
*/

img {
	max-width: 100%; /* [1] */
	font-style: italic; /* [2] */
	vertical-align: middle; /* [3] */
	object-fit: cover;
}

svg {
	vertical-align: middle; /* [3] */
	overflow: visible; /* [5] */
	max-width: 100%;
}

/*
[1] If a `width` and/or `height` attribute have been explicitly defined, let’s not make the image fluid.
*/

img[width], /* [1] */
img[height] {  /* [1] */
	max-width: none;
}

/*
For lazy loading images, add a background color so its obvious this space is an
image placeholder, rather than just whitespace.
*/
img[data-lazy-src],
img[data-lazy-srcset] {
	background-color: color('light');
}