Cacher is the code snippet organizer for pro developers

.layout-content-image {
	// margin: 2em 0;

	&__bg {
		bottom: 0;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
	}

	&__wrap {
		align-items: center;
		display: flex;
		padding-top: 4em;
		padding-bottom: 4em;
		padding-top: 6em;
	}

	&__stat {
		margin: -25px auto 0;
	}

	&__title {
		font-family: $meta;
		font-size: 2.5rem;
		font-weight: 700;
		line-height: 1.2em;
		margin-top: 0;
	}

	&__content-body {

		@include media( $small-down ) {
			padding-bottom: em(60);
		}
	}

	&__image {
		@include clearfix;
		position: relative;
	}

	&.layout.layout-content-image--zindex-low {
		z-index: 1 !important;
	}

	&.layout.layout-content-image--zindex-high {
		z-index: 4 !important;
	}

	&--bg-gray &__bg {
		background: #f4f4f4;
	}

	&--narrow &__wrap {
		max-width: $narrow-outer-container-width;
	}

	&--inverse {
		&,
		a,
		ul li::before {
			color: #ffffff;
		}
	}

	&--has-stat {
		.layout-content-image {
			&__wrap {
				align-items: flex-start;
			}
		}
	}

	&--has-1-image {
		.layout-content-image {
			&__content {
				margin-right: flex-grid(1) + (flex-gutter() * 2);
				width: flex-grid(6);
			}

			&__image {
				width: flex-grid(5);

				&-img--1 {
					float: left;
					max-width: initial;
					width: 100% + flex-grid(1.7, 5);
				}
			}
		}
	}

	&--has-2-images {
		&.layout {
			z-index: 3!important;
		}

		& + &--has-2-images {
			z-index: 4!important;
		}
		.layout-content-image {

			&__content {
				margin-right: flex-grid(1) + (flex-gutter() * 2);
				width: flex-grid(5);
			}

			&__image {
				width: flex-grid(6);

				&-img--1 {
					float: left;
					max-width: initial;
					width: 100% + flex-grid(0.75, 6);
				}

				&-img--2 {
					bottom: -115px;
					left: flex-grid(3, 6) + (flex-gutter(6) * 2);
					max-width: initial;
					position: absolute;
					width: flex-grid(4.7, 6) - (flex-gutter(6) * 2);
				}
			}
		}
	}

	&--right.layout-content-image--has-1-image {
		.layout-content-image {
			&__content {
				@include media( $medium-up) {
					margin-left: flex-grid(1) + (flex-gutter() * 2);
				}
				margin-right: 0;
				order: 2;
			}

			&__image {
				order: 1;

				&-img {
					float: right;
				}
			}
		}
	}

	&--right.layout-content-image--has-2-images {
		.layout-content-image {
			&__content {
				@include media( $medium-up) {
					margin-left: flex-grid(1) + (flex-gutter() * 2);
				}
				margin-right: 0;
				order: 2;
			}

			&__image {
				order: 1;

				&-img {
					&--1 {
						float: right;
						margin-right: flex-grid(0.75, 6);
						margin-top: -10%;
					}

					&--2 {
						left: auto;
						right: 0;
						// right: - flex-grid(1, 6) - flex-gutter(6);
					}
				}
			}
		}
	}

	@include media($medium-up) {
		.layout-content-image__image-img--1 {
			margin-top: -10%;
		}
	}
	@include media($small-down) {
		.layout-content-image__wrap,
		.layout-content-image__image-img  {
			padding-top: 3em;
		}
	}
	@include media($xsmall-only) {
		&--has-1-image {
			.layout-content-image {

				&__image {
					&-img--1 {
						width: 100%;
					}
				}
			}
		}

		&--has-2-images {
			.layout-content-image {
				&__wrap {
					padding-bottom: em(200);
				}

				&__image {
					&-img--1 {
						width: flex-grid(5, 6);
					}

					&-img--2 {
						bottom: -80px;
						left: flex-grid(2.5, 6);
						max-width: initial;
						position: absolute;
						width: flex-grid(3.5, 6) + flex-gutter(6);
					}
				}
			}
		}
	}

	@include media($large-down) {
		padding: 2em 0;

		&__wrap {
			padding-bottom: 0;
		}

		&--has-1-image {
			.layout-content-image {
				&__bg {
					top: 0;
				}

				&__wrap {
					align-items: center;
				}
			}
		}

		&--has-2-images {
			.layout-content-image {
				&__wrap {
					align-items: center;
					padding-bottom: 0;
				}
			}
		}
	}

	@include media($small-down) {
		&__stat {
			font-size: 0.6em;
		}

		&--has-2-images {
			.layout-content-image {
				&__content {
					margin-right: flex-gutter();
					width: flex-grid(6);
				}
			}
		}
	}

	@include media($xsmall-only) {
		&__wrap {
			display: block;
		}

		&--has-1-image,
		&--has-2-images {
			.layout-content-image {
				&__content,
				&__image {
					margin-right: 0;
					width: auto;
				}

				&__content {
					margin-bottom: 2em;
				}
			}
		}

		&--has-2-images {
			.layout-content-image {
				&__image {
					padding-bottom: 80px;

					&-img--2 {
						bottom: 0;
					}
				}
			}
		}
	}
}