#macro-nav { color: #FFF; }
@media (min-width: 900px)	 { #macro-nav { margin: 100px 0; } }
@media (max-width: 899.99px) { #macro-nav { margin: 75px 0; } }

/*-----------------------------------------------------------------------*/

#macro-nav > .content-wrapper {
	display: flex;
	flex-direction: column;
}
@media (min-width: 900px) {
	#macro-nav > .content-wrapper { row-gap: 40px; }
}
@media (max-width: 899.99px) {
	#macro-nav > .content-wrapper { row-gap: 35px; }
}

/*-----------------------------------------------------------------------*/

#macro-nav > .content-wrapper > header {
	align-self: center;
	max-width: 800px;
}
#macro-nav > .content-wrapper > header > .title {
	margin: 0 auto;
	
	background-image: linear-gradient(to right, #BCD5E4, #FFFFFF);
	background-clip: text;
	
	text-align: center;
	font-weight: 500;
	color: transparent;
}
#macro-nav > .content-wrapper > header > .title .arrow {
	background-image: url("../../images/icons/arrow.svg");
	background-repeat: no-repeat;
	background-position: bottom right;
}
#macro-nav > .content-wrapper > header > .title .icon {
	display: inline-block; overflow: hidden;
	margin: -20px 0;
	
	border-radius: 50%;

	vertical-align: middle;
}
@media (min-width: 900px) {
	#macro-nav > .content-wrapper > header > .title {
		line-height: 112%;
		font-size: 56px;
	}
	#macro-nav > .content-wrapper > header > .title .arrow {
		padding-bottom: 12px;
		background-size: auto 20px;
	}
	#macro-nav > .content-wrapper > header > .title .icon {
		height: 65px; width: 65px;
	}
}
@media (max-width: 899.99px) {
	#macro-nav > .content-wrapper > header > .title {
		font-size: 28px;
	}
	#macro-nav > .content-wrapper > header > .title .arrow {
		padding-bottom: 6px;
		background-size: auto 10px;
	}
	#macro-nav > .content-wrapper > header > .title .icon {
		height: 35px; width: 35px;
	}
}

/*-----------------------------------------------------------------------*/

#macro-nav > .content-wrapper > footer { text-align: center; }
#macro-nav > .content-wrapper > footer > .description {
	max-width: 850px;
	margin: 0 auto;
	
	line-height: 130%;
	font-weight: 500;
}
#macro-nav > .content-wrapper > footer > .description .highlighted {
	background-color: #E9C8D2;
	color: #000;
}
#macro-nav > .content-wrapper > footer > .cta-btn { margin-top: 40px; }
@media (min-width: 900px) {
	#macro-nav > .content-wrapper > footer > .description {
		font-size: 24px;
	}
}
@media (max-width: 899.99px) {
	#macro-nav > .content-wrapper > footer > .description {
		font-size: 16px;
	}
}