@import "@{parenturl}/less/mixins.less";
@gold: #D19F5D;
@navy: #134C56;
@teal: #AFDFE4;

#highlights {
	background-image:url('/wp-content/uploads/2021/02/highlights.svg');
	> div {
		.max-width(1600px);
		display:grid;
		grid-template-columns:4fr 12fr 4fr 12fr 4fr 12fr 4fr 12fr 4fr 12fr 4fr 12fr 4fr;
		grid-template-rows:44fr 12fr 44fr;
		overflow:visible;
		.padding-ends(50px);

		.square {
			&:nth-child(even) {
				grid-row:2 / span 2;
			}
			&:nth-child(odd) {
				grid-row:1 / span 2;
			}


			&:nth-child(1) {
				grid-column:3 / span 3;
			}
			&:nth-child(2) {
				grid-column:5 / span 3;
			}
			&:nth-child(3) {
				grid-column:7 / span 3;
				.content { left: auto; right: calc(100% - 1px); }
			}
			&:nth-child(4) {
				grid-column:9 / span 3;
				.content { left: auto; right: calc(100% - 1px); }
			}
			
		}
	}
	
	.square {
		text-align:center;
		font-size:18px;
		.vertAlign;
		flex-direction:column;
		svg {
			fill:#fff;
			max-width:142px;
		}
		h2 {
			max-width: 90%;
			margin:10px auto 0;
			color:@navy;
			.font(Montserrat, 700, 1.375em);
			letter-spacing:.1em;
			text-align:center;
		}
		.content {
			padding: 20px;
			color: #fff;
		}
		
		.learn-more {
			display: block;
			background-color: @teal;
			margin-top: 10px;
			color: @navy;
		}
		& {
			svg {
				fill:#fff;
				.transition();
			}
			h2 {
				color:@navy;
				.transition();
			}
		}
	}
	
	@media (min-width:769px) {
		> div {
			&:before, &:after {
				content:' ';
				display:block;
				aspect-ratio:1/1;
				background-color:#AFDFE4;
				transform-origin:center;
				.rotate(45deg);
			}
			&:before {
				grid-column:1 / span 3;
				grid-row:2 / span 2;
			}
			&:after {
				grid-column:11 / span 3;
				grid-row:1 / span 2;
			}
		}
		.square {
			position:relative;
			z-index:1;
			.transition();
			
			aspect-ratio:1/1;
			.pseudoBefore;
			
			&:before {
				background-color:#AFDFE4;
				.rotate(45deg);
				.transition();
				transform-origin:center;
			}
			
			.content {
				position: absolute;
				top: 0; bottom: 0;
				left: calc(100% - 1px);
				z-index: -1;
				margin: auto;
				width: 400px;
				height: fit-content;
				background-color: @navy;
				pointer-events: none;
				transform: rotatez(45deg);
				.clip(~"50% 50%, 50% 50%, 50% 50%, 50% 50%");
				.transition();
			}
			
			&:hover {
				z-index:10;
				svg {
					fill:#fff;
				}
				h2 {
					color:#fff;
				}
				&:before {
					.rotate(0);
					background-color:@navy;
				}

				.content {
					pointer-events: auto;
					transform: rotatez(0deg);
					.clip(~"0 0, 100% 0, 100% 100%, 0 100%");
				}
			}
		}
		
		@media (max-width:1200px) {
			> div {
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				grid-template-rows: 1fr 0 1fr;
				grid-gap: 20px 0;

				&::before, &::after { display: none; }

				.square {
					&:nth-child(odd) { grid-row: 1; }
					&:nth-child(even) { grid-row: 3; }

					&:nth-child(1) { grid-column: 1 / span 3; }
					&:nth-child(2) { grid-column: 2 / span 3; }
					&:nth-child(3) { grid-column: 5 / span 3; }
					&:nth-child(4) { grid-column: 6 / span 3; }
				}
			}

			.square {
				.content {
					width: 350px;
				}
			}
		}
	}
	
	
	@media (max-width:768px) {
		> div {
			display: block;
		}
		
		.square {
			margin-bottom: 10px;
			padding: 20px;
			background-color: @navy;
			
			h2 { color: #fff; }
			
			.content { padding: 20px 0; }
		}
	}
}