////////// IMAGES RATIOS // ================================= //

.module{

	@if $debug{

		.module-image{

			figure{
				background-color: #eee;
			}
		}
	}

	&.img-square{

		.module-image{

			figure{
				padding-top: 100%;
			}
		}
	}

	&.img-landscape{

		.module-image{

			figure{
				padding-top: percentage(8/10);
			}
		}
	}

	&.img-portrait{

		.module-image{

			figure{
				padding-top: percentage(10/8);
			}
		}
	}
}


////////// LEAD // ================================= //

.img-lead-module{
	
	&.img-square{

		.module-image,
		.module-text{
			width: 50%;

			@include break(ml){
				width: 100%;
			}
		}

		.module-image{

			@include break(ml){
				float: none;
				width: 100%;
				max-width: none;
				padding: 0;
				margin: 0 auto $line-height*1.5fem;
			}
		}
	}
	
	&.img-landscape{

		.module-image,
		.module-text{
			width: 50%;

			@include break(ml){
				width: 100%;
			}
		}

		.module-image{

			@include break(ml){
				float: none;
				width: 100%;
				max-width: none;
				padding: 0;
				margin: 0 auto $line-height*1.5em;
			}
		}

		.module-text{

			@include break(ml){
				width: 100%;
			}
		}
	}
	
	&.img-portrait{

		.module-image{
			width: 100%;
			max-width: em(416, $em-base);

			@include break(ml){
				float: none;
				width: 100%;
				max-width: none;
				padding: 0;
				margin: 0 auto $line-height*1.5em;
			}
		}

		.module-text{
			width: 75%;

			@include break(ml){
				width: 100%;
			}
		}
	}
}