gistfile1.txt

.layout-content-image {
	position: relative;

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

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

	&__content {
		flex-basis: 55%;
		flex-grow: 1;
		flex-shrink: 1;
		padding: 10rem 3.1rem;
		padding-bottom: calc( 10% + 6rem );
		order: 2;
		box-sizing: border-box;
		padding-left: 6rem;
		max-width: 55%;
	}

	&__stat  {
		margin-top: -10%;
	}

	&__image {
		order: 1;
		flex-basis: 45%;
		flex-grow: 1;
		flex-shrink: 1;
		padding-bottom: 10%;
	}

	&__image-img--1 {
		width: 120%;
		img {
			position: relative;
			left: -20%;
			width: 100%;
			margin-top: -10%;
			display: block;
		}
	}

	&__image-img--2 {
		text-align: right;

		img {
			max-width: 75%;
		}
	}

	&--has-2-images & {
		&__image {
			padding-bottom: 10%;
		}

		&__image-img--1 {
			margin-bottom: -50%;
		}
	}

	&-has-2-images {

		& + .layout-section-title {
			margin-top: -15%;
		}
	}

	&--left & {

		&__content {
			order: 1;
			padding-left: 3.1rem;
		}

		&__image {
			&-img--1 {
				img {
					position: static;
				}
			}
		}

	}

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

	&--inverse {
		color: #fff;
		a {
			color: #fff;
		}
	}

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

	@include media( $small-down ) {

		&__wrap {
			display: block;
		}

		&__content,
		&--left .layout-content-image__content {
			padding: 4rem 0;
			padding-bottom: 6rem;
			max-width: 100%;
		}

		&__stat {
			margin-top: 0;
		}

		&__image {
			padding-bottom: 4rem;
		}

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

			img {
				position: static;
			}
		}

		&--has-2-images & {
			&__image-img--1 {

				margin-bottom: -25%;

				img {
					position: relative;
					left: 0;
				}
			}

			&__image-img--2 {

				text-align: center;

				img {
					position: relative;
				}

			}
		}
	}
}