#macro-nav-links { isolation: isolate; }
#macro-nav-links .link {}
#macro-nav-links .link > .card {
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	border: solid 1px #FCFFAA;
	
	color: #000;
	
	isolation: isolate;
	cursor: pointer;
}
#macro-nav-links .link > .front {}
#macro-nav-links .link > .front > .illustration {
	position: absolute; top: 0; left: 0; z-index: -1;
	height: 100%; width: 100%; overflow: hidden;
	
	border-radius: inherit;
}
#macro-nav-links .link > .front > .title {
	display: flex; width: fit-content;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	background-color: #FCFFAA;
	border-radius: 25px;
	
	font-weight: 500;
}
#macro-nav-links .link > .back {
	display: flex; min-height: 100%; overflow: auto;
	flex-direction: column;
	
	background-image: linear-gradient(140deg, #D5ED99 12.5%, #BCD5E4 100%);
	
	opacity: 0;
	transition: opacity .4s ease-out;
}
#macro-nav-links .link:hover > .back { opacity: 1; }
#macro-nav-links .link > .back > * {
	margin: 0;
}
#macro-nav-links .link > .back > .title {
	font-weight: 500;
}
#macro-nav-links .link > .back > .subtitle {
	margin-bottom: 10px;
	
	font-weight: 600;
}
#macro-nav-links .link > .back > .description {
	margin-bottom: 25px;
	
	font-weight: 500;
}
#macro-nav-links .link > .back > .cta {
	display: flex; flex: 0 0 auto;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: auto;
	
	background-color: transparent;
	border: solid 1px currentColor;
	border-radius: 25px;

	font-weight: 500;
	
	transition:
		background-color .2s ease-out,
		border-color	 .2s ease-out,
		color			 .2s ease-out;
}
#macro-nav-links .link > .back > .cta > span {
	position: relative;
}
#macro-nav-links .link > .back > .cta > span:before {
	content: '';
	position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(-90deg);
	display: block; height: 10px; width: 14px;
	
	background-color: currentColor;
	
	--mask-image: url("../../images/icons/arrow.down.svg");
	--mask-position: center;
	--mask-size: contain;
	--mask-repeat: no-repeat;

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
}
#macro-nav-links .link > .back > .cta:hover {
	background-color: #1C3558;
	border-color: transparent;
	color: #FFF;
}
@media (min-width: 900px) {
	#macro-nav-links {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 60px 40px 40px;
	}
	#macro-nav-links > .link {
		position: relative;
		height: 420px; flex: 0 0 300px;
		margin: 0 -300px;
		
		animation: link-float var(--dur) ease-in-out var(--delay) infinite;
		transition: margin .4s ease-out;
	}
	@keyframes link-float {
		0%	 { transform: translateY(0px) rotate(var(--rotate)); }
		50%	 { transform: translateY(-20px) rotate(var(--rotate)); }
		100% { transform: translateY(0px) rotate(var(--rotate)); }
	}
	
	#macro-nav-links > .link > .card {
		border-radius: 30px;
	}
	#macro-nav-links > .link > .front {
		padding: 20px;
	}
	#macro-nav-links > .link > .front:after {
		content: '';
		position: absolute;
		display: block;
		
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		
		opacity: 1;
		transition: opacity .4s ease-out;
	}
	#macro-nav-links > .link:hover > .front:after { opacity: 0; }
	#macro-nav-links > .link > .front > .title {
		height: 50px;
		padding: 0 25px;
		
		font-size: 22px;
	}
	#macro-nav-links > .link > .back {
		padding: 35px;
	}
	#macro-nav-links > .link > .back > .title {
		margin-bottom: 40px;
		font-size: 22px;
	}
	#macro-nav-links > .link > .back > .subtitle {
		line-height: 28px;
		font-size: 25px;
	}
	#macro-nav-links > .link > .back > .description {
		line-height: 20px;
		font-size: 17px;
	}
	#macro-nav-links > .link > .back > .cta {
		height: 50px; width: fit-content;
		padding: 0 25px 0 30px;
		
		font-size: 22px;
	}
	#macro-nav-links > .link > .back > .cta > span {
		padding-right: 30px;
	}
	
	@media (max-width: 1249.99px) {
		#macro-nav-links .link > .front > .title {
			transform: rotate(-90deg) translateX(-100%);
			transform-origin: top left;
		}
	}
	
	#macro-nav-links > .link:nth-child(1) {
		--rotate: 1.72deg;
		--dur: 4s;
		--delay: 0s;
		margin-left: -35px !important;
	}
	#macro-nav-links > .link:nth-child(1) > .front:after {
		bottom: 95px; left: -35px; transform: rotate(10deg);
		height: 150px; width: 140px;
		
		background-image: url("../../images/accents/accent-swirl.svg");
	}
	#macro-nav-links > .link:nth-child(2) {
		--rotate: 8.16deg;
		--dur: 4.2s;
		--delay: -1.5s;
	}
	#macro-nav-links > .link:nth-child(3) {
		--rotate: -12.72deg;
		--dur: 3.8s;
		--delay: -3s;
	}
	#macro-nav-links > .link:nth-child(3) > .front:after {
		bottom: 75px; right: 75px; transform: rotate(10deg);
		height: 120px; width: 90px;
		
		background-image: url("../../images/accents/accent-pointer.png");
	}
	#macro-nav-links > .link:nth-child(4) {
		--rotate: 9.64deg;
		--dur: 4.5s;
		--delay: -0.8s;
		margin-right: -10px !important;
	}
	#macro-nav-links > .link:nth-child(4) > .front:after {
		bottom: -30px; right: 30px; transform: rotate(-10deg);
		height: 100px; width: 100px;
		
		background-image: url("../../images/accents/accent-star.png");
	}
	
	#macro-nav-links > .link:not(:last-child):hover {
		margin-left: -250px;
    	margin-right: -150px;
	}
}
@media (max-width: 899.99px) {
	#macro-nav-links {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
	}
	#macro-nav-links > .swiper {
		position: relative;
		width: 50vw; overflow: visible;
		padding: 1px;
	}
	#macro-nav-links > .swiper:before,
	#macro-nav-links > .swiper:after {
		content: '';
		position: absolute; z-index: 2;
		display: block;
		
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		
		opacity: 1;
		transition: opacity .4s ease-out;
		animation: link-float var(--dur) ease-in-out var(--delay) infinite;
	}
	@keyframes link-float {
		0%	 { transform: translateY(0px) scaleX(var(--scale, 1)) rotate(var(--rotate, 0deg)); }
		50%	 { transform: translateY(-20px) scaleX(var(--scale, 1)) rotate(var(--rotate, 0deg)); }
		100% { transform: translateY(0px) scaleX(var(--scale, 1)) rotate(var(--rotate, 0deg)); }
	}
	#macro-nav-links > .swiper:after:hover {
		opacity: 0;
	}
	
	#macro-nav-links > .s-prev,
	#macro-nav-links > .s-next {
		position: relative; z-index: -1;
		margin: 0;
	}
	
	#macro-nav-links > .s-prev { transform: scale(.8) rotate(-10deg); }
	
	#macro-nav-links > .s-next { transform: scale(.8) rotate(10deg); }
	
	#macro-nav-links > .s-main { margin: 0 -25vw; }
	#macro-nav-links > .s-main:before {
		--dur: 4.2s;
		--delay: -1.5s;
		--scale: -1;
		--rotate: -30deg;
		
		bottom: -25px; left: -15px;
		height: 70px; width: 55px;
		
		background-image: url("../../images/accents/accent-pointer.png");
	}
	#macro-nav-links > .s-main:after {
		--dur: 3.8s;
		--delay: -3s;
		--rotate: -30deg;
		
		top: -45px; right: -45px;
		height: 110px; width: 100px;
		
		background-image: url("../../images/accents/accent-swirl.svg");
	}
	
	
	
	#macro-nav-links .link:before {
		content: '';
		display: block;
		padding-top: 140%;
	}
	
	#macro-nav-links .link > .card {
		border-radius: 15px;
	}
	#macro-nav-links .link > .front {
		padding: 15px;
	}
	#macro-nav-links .link > .front > .title {
		height: 35px;
		padding: 0 15px;
		
		font-size: 12px;
	}
	#macro-nav-links .link > .back {
		padding: 20px;
	}
	#macro-nav-links .link > .back > .title {
		margin-bottom: 25px;
		font-size: 12px;
	}
	#macro-nav-links .link > .back > .subtitle {
		line-height: 120%;
		font-size: 20px;
	}
	#macro-nav-links .link > .back > .description {
		font-size: 13px;
	}
	#macro-nav-links .link > .back > .cta {
		height: 35px;
		padding: 0 15px 0 18px;
		
		font-size: 12px;
	}
	#macro-nav-links .link > .back > .cta > span {
		padding-right: 17px;
	}
	#macro-nav-links .link > .back > .cta > span:before {
		height: 6px; width: 10px;
	}
}