.call-to-action {
	--title-color: var(--gray-100);
	--subtitle-color: var(--gray-100);
	--icon-color: var(--gray-100);
	--title-font-family: var(--font-display);
	--subtitle-font-family: var(--font-body);
	transition: margin 0.15s ease;

	a,
	a:hover {
		text-decoration: none;
	}
}

.call-to-action .inner {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: var(--space-5);
	padding: var(--space-3) var(--space-5);
}

.call-to-action .icon {
	color: var(--icon-color);
	font-size: var(--text-2xl);
}

.call-to-action .content {
	display: flex;
	flex-direction: column;
	gap: var(--space-px);
	align-items: flex-start;
	text-align: left;
	position: relative;

	@media (min-width: 64em) {
		&::before {
			content: '';
			background: url(/includes/public/assets/shared/star-outline.svg) no-repeat;
			background-size: cover;
			position: absolute;
			top: -14px;
			left: 0;
			translate: -50%;
			width: 117px;
			height: 112px;
			pointer-events: none;
			opacity: 0;
			scale: 0.7;
			transition: opacity 0.15s ease, scale 0.15s ease;
		}
	}
}

.call-to-action .title {
	font-family: var(--font-pridi);
	font-weight: 600;
	font-size: 2.125rem;
	line-height: 1.2;
	color: var(--white);

	&::after {
		content: '';
		display: block;
		width: 50px;
		height: 2px;
		background-color: var(--blue-light);
		margin-top: var(--space-2);
	}
}

.call-to-action .subtitle {
	font-family: var(--font-inter);
	font-weight: 600;
	font-size: var(--text-lg);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--white);
}

.call-to-action .read-more {
	font-size: var(--text-xs);
}

@media (min-width: 64em) {
	@media (hover: hover) {
		.call-to-action:hover {
			margin-top: -19px;

			& .content::before {
				opacity: 1;
				scale: 1;
			}
		}
	}
}