.ctaBoxes {
	padding: var(--top_bottom_gutter) 0 129px;

	@media @flyout {
		padding: var(--top_bottom_gutter_flyout) 0 80px;
	}

	@media @mobile {
		padding: var(--top_bottom_gutter_mobile) 0 80px;
	}

	&__grid {
		display: flex;
		width: ~"calc(100% + 65px)";
		margin: 0 -32.5px;

		@media @flyout {
			width: ~"calc(100% + 50px)";
			margin: 0 -25px;
		}

		&.swiper {
			@media @flyout {
				padding-bottom: 64px;
			}
		}

		.swiper-wrapper {
			width: 100%;
			display: flex;
		}
	}

	&__cta {
		flex: 0 0 33.333333%;
		padding: 0 32.5px;
		max-width: 483px;
		min-width: 320px;

		@media @flyout {
			max-width: 400px;
			flex: 0 0 50%;
			padding: 0 25px;
		}

		@media @mobile {
			flex: 0 0 100%;
			max-width: 320px;
		}

		@media all and (max-width: 420px) {
			max-width: 100%;
		}
	}
}

.ctaBox {
	border-radius: 9px;
	overflow: hidden;
	height: 100%;
	width: 100%;
	position: relative;
	text-align: center;

	&__box {
		color: var(--primary_color);

		&.darkBg {
			color: #fff;
		}
	}

	a.ctaBox__box {
		&:hover, &:active, &:focus-visible {
			.ctaBox__imageWrap img {
				transform: scale(1.1);
				transition: transform 300ms;
			}
		}
	}

	&__header {
		padding: 25px 26px 26px 26px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: linear-gradient(109deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%);
		backdrop-filter: blur(12px);
		z-index: 2;
		color: inherit;
	}

	&__title {
		color: inherit;
		.rems(32);
		line-height: 40px;
		margin: 0 0 8px;
	}

	&__content {
		color: inherit;
		.rems(18);
		line-height: 22px;
	}

	&__imageWrap {
		width: 100%;
		padding-bottom: 152%;
		position: relative;
		z-index: 1;

		img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			transform: scale(1.01);
			object-fit: cover;
			transform-origin: center;
			transition: transform 300ms;
		}
	}
}
