// ============================================================================
// :: App CTA
// ============================================================================
.m-app-cta {
	position: relative;

	overflow: hidden;

	background: $gradient-app-cta;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-app-cta__background {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: $z-index-lower;

	width: 200%;
	height: 200%;

	background-repeat: repeat;
	opacity: 0.1;

	transform:
		translate(-50%, -50%)
		rotate(-15deg);
}

.m-app-cta__image-container {
	position: relative;

	overflow: visible;

	@include respond-to($screen-small-base) {
		order: 0;
		height: 25rem;
	}
}

.m-app-cta__image {
	position: absolute;
	bottom: -50%;
	right: 0;

	width: 120%;

	transform:
		translateX(10%)
		rotate(-15deg);

	@include respond-at($screen-1x-small) {
		bottom: -100%;
	}

	@include respond-at($screen-small-base) {
		top: 50%;
		bottom: 0;

		width: 150%;

		transform:
			translateY(-50%)
			rotate(-15deg);
	}
}

.m-app-cta__content {

	@include respond-to($screen-small-base) {
		order: -1;
	}
}

.m-app-cta__title,
.m-app-cta__text {
	color: $text-color-white;
}

.m-app-cta__text {
	font-weight: 400;
}

.m-app-cta__actions {
	display: inline-flex;
	align-items: center;
	margin-top: 5rem;

	.m-app-cta__actions-item {
		margin-left: 1rem;

		&:first-child {
			margin-left: 0;
		}
	}
}

// Targeting the img tag directly is needed because all images inside an
// .m-section__content are added with a margin-top of 2rem, due to this line
// .m-section__content img
.m-app-cta__actions-button-image,
img.m-app-cta__actions-button-image {
	margin-top: 0;
}

.m-app-cta__actions-button {
	position: relative;

	display: inline-block;
	width: 17rem;
}

.m-app-cta__actions-button-link {
	position: relative;

	display: block;
	width: 100%;
	height: 100%;
}

.m-app-cta__actions-button--small {
	width: 15.4rem;
}