/*------------------------------------*\
    $IMAGES
\*------------------------------------*/
/**
 * Demo: jsfiddle.net/inuitcss/yMtur
 */
/**
 * Fluid images.
 */
img {
	max-width: 100%;
}

/**
 * Non-fluid images if you specify `width` and/or `height` attributes.
 */
img[width],
img[height] {
	max-width: none;
}

/**
 * Rounded images.
 */
.img--round {
	border-radius: $brand-round;
}

/**
 * Image placement variations.
 */
.img--right {
	float: right;
	@include rem(margin-bottom, $base-spacing-unit);
	@include rem(margin-left, $base-spacing-unit);
}

.img--left {
	float: left;
	@include rem(margin-right, $base-spacing-unit);
	@include rem(margin-bottom, $base-spacing-unit);
}

.img--center {
	display: block;
	margin-right: auto;
	@include rem(margin-bottom, $base-spacing-unit);
	margin-left: auto;
}

/**
 * Keep your images on your baseline.
 *
 * Please note, these will not work too nicely with fluid images and will
 * distort when resized below a certain width. Use with caution.
 */
.img--short {
	@include rem(height, 5 * $base-spacing-unit);
}

.img--medium {
	@include rem(height, 10 * $base-spacing-unit);
}

.img--tall {
	@include rem(height, 15 * $base-spacing-unit);
}

/**
 * Images in `figure` elements.
 */
figure > img {
	display: block;
}
