// ============================================================
//          Images                                  
// ------------------------------------------------------------*/
+route(style,base)
	// ---- Fluid Images ----
	img
		max-width: 100%
		height: auto

	// ---- Images are not Fluid with HTML Dimensions ----
	img[width],img[height]
		max-width: none

	// ---- Full Width Images ----

	//**
	// Class: 		.img--full
	// Description: The Image becomes the Full Width (Width: 100%)
	//**
	.img-full
		max-width : none
		width     : 100%

	.img-150
		max-width: 150%
		height: auto

	.img-200
		max-width: 200%
		height: auto

	.img-300
		max-width: 300%
		height: auto

	@if nth($layout-fluid-behavior,2) != false
		@media (max-width: nth($layout-second-grid,1) + 0px)
			.img-max_n
				max-width: 100% 
		@media (max-width: $bp-mobile  - 1px)
			.img-max_s
				max-width: 100%	
				
	// ---- Image Placement ----
	
	%img 
		+marginbottom($spacing-vertical)
		display: block 
		
	//**
	// Class: 		.img--right
	// Description: The Images floats right
	//**
	.img_right
		@extend %img
		float         : right
		margin-left   : $spacing-vertical-half + 0px

	//**
	// Class: 		.img--left
	// Description: The Image floats left
	//**
	.img_left
		@extend %img
		float         : left
		margin-right  : $spacing-vertical-half + 0px

	//**
	// Class: 		.img--center
	// Description: Center the Image as Block Element
	//**
	.img_center
		@extend %img
		margin-right  : auto
		margin-left   : auto

	// ---- Images in Figure Elements ----


	figure
		> img
			display       : block
			margin-bottom : 0