.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;
		}

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

		.splide__track {
			width: 100%;
		}

		.splide__list {
			display: flex;
			width: 100%;
		}
	}

	&__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;
			min-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 {

		color: var(--primary_color);

		&:hover, &:active, &:focus-visible {
			color: var(--primary_color);

			.ctaBox__imageWrap {

				img {
					transform: scale(1.1);
					transition: transform 300ms;
				}

			}

		}

		&.darkBg {
			color: #fff;

			&:hover, &:active, &:focus-visible {
				color: #fff;
			}
		}



	}

	&__header {
		padding: 25px 26px 26px 26px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		background: #fff;
		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;
		}
	}


}
