.call-to-action {
	--title-color: var(--white);
	--subtitle-color: var(--blue-b3);
	--icon-color: var(--white);
	--title-font-family: var(--font-display);
	--subtitle-font-family: var(--font-body);

	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
	border: 0.5px solid var(--gray-70);
	border-radius: 15px;
}

.call-to-action .inner {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	gap: var(--space-2);
	padding: 16px 14px;
	padding-top: var(--space-6);
}

.call-to-action .icon {
	min-width: 58px;
	max-width: 58px;
	min-height: 32px;
	max-height: 32px;
}

.call-to-action .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}

.call-to-action .title {
	font-family: var(--title-font-family);
	color: var(--title-color);
	font-size: var(--text-base);
	line-height: 1.1875;
	text-align: center;
	text-transform: uppercase;
	margin: 0 var(--space-1);
}

.call-to-action .subtitle {
	font-family: var(--subtitle-font-family);
	font-size: var(--text-sm);
	font-weight: 400;
	font-style: italic;
	line-height: 1.35;
	color: var(--subtitle-color);
}

@media screen and (min-width: 64em) {
	.call-to-action {
		position: relative;
		height: unset;
		-webkit-backdrop-filter: unset;
		backdrop-filter: unset;
		border: unset;
		transition: background-color 300ms ease-in;
	}

	.call-to-action::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
		width: 100%;
		background-color: rgba(255, 255, 255, 0);
		-webkit-backdrop-filter: blur(30px);
		backdrop-filter: blur(30px);
		border-radius: 15px;
		opacity: 1;
		transition: height 300ms ease-in, width 300ms ease-in, border-radius 300ms ease-in, background-color 300ms ease-in;
		pointer-events: none;
	}

	.call-to-action .inner {
		position: relative;
		z-index: 1;
		gap: var(--space-5);
		padding: var(--space-10) var(--space-8) var(--space-8);
		transition: padding 300ms ease-in;
	}

	.call-to-action .icon {
		min-width: 99px;
		max-width: 99px;
		min-height: 55px;
		max-height: 55px;
	}

	.call-to-action .content { gap: var(--space-2); }

	.call-to-action .title {
		font-size: var(--text-xl);
		line-height: 1.2;
	}

	.call-to-action .subtitle {
		font-size: var(--text-base);
		line-height: 1.1875;
	}

	@media (hover: hover) {
		.call-to-action:hover::after {
			height: calc(100% + 17px);
			width: calc(100% + 14px);
			border-radius: 30px;
			background-color: rgba(0, 104, 132, 0.5);
		}
	}
}