.has-animations {

	.features-extended {
		opacity: 0;
	}

	&.is-loaded {

		.features-extended {
			opacity: 1;
		}
	}
}

.features-extended-header {
	margin-bottom: 32px;
}

.features-extended-wrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: -24px;

	&:last-of-type {
		margin-bottom: -24px;
	}

	&:not(:last-of-type) {
		margin-bottom: 24px;
	}
}

.feature-extended {
    padding: 24px 0;
}

.feature-extended-image {
	position: relative;
	margin-bottom: 32px;

	img,
    svg {
        width: 100%;
        max-width: 296px;
        height: auto;
        margin-left: auto;
		margin-right: auto;
        overflow: visible;
    }
}

.feature-extended-body {
    text-align: center;
}

@include media( '>medium' ) {

    .features-extended {

		.container {
			/* image width (440) + padding (96) + text width (360) = 896 */
			max-width: 864px + ( get-content-padding(desktop) * 2 );
		}

		.section-inner {
			padding-bottom: 128px;
		}

        .section-paragraph {
            padding-left: 72px;
            padding-right: 72px;
            margin-bottom: 0;
        }
    }

	.features-extended-header {
		margin-bottom: 80px;
	}

	.features-extended-wrap {
		margin-top: -64px;

		&:last-of-type {
			margin-bottom: -64px;
		}

		&:not(:last-of-type) {
			margin-bottom: 64px;
		}
	}

    .feature-extended {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-end;
        padding: 64px 0;

		.feature-extended-image {
			width: 440px;
			margin-right: 96px;
			margin-bottom: 0;

			img,
			svg {
				width: auto;

				&.device-mockup {
					max-width: 296px;
				}
			}
		}

		&:nth-child(even) {
			justify-content: flex-start;

			.feature-extended-image {
				order: 1;
				margin-left: 96px;
				margin-right: 0;
			}
		}
    }

	.feature-extended-body {
		/* Align vertically */
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* Align vertically, end */
		flex-shrink: 0;
		width: 360px;
		text-align: left;
	}
}

@include media( '>large' ) {

	.features-extended {

		.container {
			/* image width (440) + padding (64) + text width (392) = 896 */
			max-width: 896px + ( get-content-padding(desktop) * 2 );
		}
	}

	.feature-extended {

		.feature-extended-image {
			margin-right: 64px;
		}

		&:nth-child(even) {

			.feature-extended-image {
				margin-left: 64px;
			}
		}
	}

	.feature-extended-body {
		width: 392px;
	}
}
