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

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

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

.call-to-action .content {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.call-to-action .mobile-badge {
	width: 62px;
	height: auto;

	@media (min-width: 40em) {
		& {
			width: 141px;

			.scale-up {
				scale: 0.92;
				transform-origin: center;
				transition: scale 0.6s ease;

				.call-to-action:hover & {
					scale: 1;
				}
			}
		}
	}
}

/* Feel free to change title and subtitle styling. Moved these to intro panel 5 */
.call-to-action .title {
	font-family: var(--font-titling);
	font-weight: 400;
	color: #ffffff;
	font-size: 1.625rem;
	text-transform: uppercase;
	line-height: var(--leading-none);
}

.call-to-action .subtitle {
	line-height: var(--leading-none);
	font-family: var(--font-script);
	font-weight: 400;
	color: #ffffff;
	font-size: 1.75rem;
	letter-spacing: 0.01em;
}

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

.call-to-action .inner .icon {
	width: 55px;
	height: 55px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.call-to-action .inner .icon:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 41px;
	height: 41px;
	background-color: var(--red);
	border-radius: 50%;
	pointer-events: none;
	transition: scale var(--transition-appendix);
}

.call-to-action .inner .icon:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('../svg/ornate-border-orange.svg') no-repeat center center / contain;
	transition: rotate var(--transition-appendix);
}

.call-to-action .inner .icon img {
	width: 21px;
	height: 14.32px;
	z-index: 3;
}

@media(min-width: 64em) {
	.call-to-action .inner .icon.enews img {
		width: 32.52px;
		height: 22px;
	}

	.call-to-action .inner .icon.destination-guide img {
		width: 36px;
		height: 36px;
	}

	.call-to-action .inner .icon {
		width: 84px;
		height: 84px;
	}

	.call-to-action .inner .icon:before {
		width: 62px;
		height: 62px;
	}
}

@media(hover:hover) {
	.call-to-action .inner:hover .icon:before {
		scale: 0.9;
	}

	.call-to-action .inner:hover .icon:after {
		rotate: 10deg;
	}
}

@media screen and (min-width: 64em) {
	.call-to-action .title {
		font-size: 2.75rem;
		letter-spacing: 0.045em;
	}

	.call-to-action .subtitle {
		font-size: 3.125rem;
		letter-spacing: 0.01em;
	}

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

	.primary-site-menu .call-to-action .subtitle {
		font-size: 2.063rem;
	}

	.primary-site-menu .nav .widgets .call-to-action .title {
		font-size: 1.75rem;
	}
}