// ============================================================================
// :: CTA
// ============================================================================
.m-cta {
	display: flex;
	flex-direction: column;

	min-height: 30rem;

	overflow: hidden;

	text-align: left;

	background-color: $background-color-white;
	box-shadow: $box-shadow;

	@include respond-at($screen-small-base) {
		flex-direction: row;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-cta__image-container {
	position: relative;

	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 100%;
	height: 20rem;
	overflow: hidden;

	@include respond-at($screen-small-base) {
		min-width: 30rem;
		height: auto;
	}

	@include respond-at($screen-medium-base) {
		min-width: 44rem;
		height: auto;
	}
}

.m-cta__side-container {
	position: relative;

	display: flex;
	justify-content: left;
	align-items: center;
	height: 20rem;
	overflow: hidden;
	padding: 4rem;

	background-color: $background-color-grey-extra-light;

	@include respond-at($screen-small-base) {
		justify-content: center;
		order: -1;
		min-width: 30rem;
		height: auto;
	}

	@include respond-at($screen-medium-base) {
		min-width: 44rem;
		height: auto;
		padding: 4.8rem;
	}
}

.m-cta__image {
	position: absolute;

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.m-cta__content {
	width: 100%;
	padding: 4rem;

	@include respond-at($screen-small-base) {
		padding: 4rem 7rem;
	}

	@include respond-at($screen-medium-base) {
		padding: 5rem 7rem 7rem 11rem;
	}

	.a-link,
	.a-button {
		margin-right: 2rem;
	}

	.a-link {
		display: inline-flex;
	}
}

.m-cta__content__title {
	hyphens: auto;
}

.m-cta__content__text {
	margin-top: 2rem;
}

.m-cta__content__button {
	margin-top: 4rem;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-cta--grey {
	box-shadow: none;
	background-color: $background-color-grey-extra-light;
}

.m-cta--animate {
	animation: jump 5s ease-in-out infinite;
}

.m-cta--small {

	.m-cta__content {
		padding: 4rem;

		@include respond-at($screen-small-base) {
			padding: 4rem;
		}

		@include respond-at($screen-medium-base) {
			padding: 4rem;
		}
	}
}

// ============================================================================
// :: Animations
// ============================================================================
@keyframes jump {

	0% {
		transform: translateY(0);
	}

	6% {
		transform: translateY(-0.8rem);
	}

	14% {
		transform: translateY(0.3rem);
	}

	20% {
		transform: translateY(0);
	}
}