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

	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;

		justify-content: flex-end;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-blog-cta__image {
	position: absolute;
	z-index: $z-index-lower;

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

.m-blog-cta__content {
	position: relative;
	z-index: $z-index-low;

	margin: 5rem;
	padding: 4rem;

	background-color: white;

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

	@include respond-at($screen-medium-base) {
		width: 60%;

		padding: 4rem;
	}

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

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

	.a-button__icon {
		animation: button 3s ease-in-out infinite;
	}
}

.m-blog-cta__content__title {
	hyphens: auto;
}

.m-blog-cta__content__button {
	margin-top: 2rem;
}

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

	font-size: 1.8rem;
}

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

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

	0% {
		transform: translateY(0);
	}

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

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

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

@keyframes button {

	0% {
		transform: translateX(0);
	}

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

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

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