@import "@{parenturl}/less/mixins.less";

@blue: #1B4F72;

#difference {
	background-image:url('/wp-content/uploads/2021/04/difference.jpg');
	background-size:cover;
	background-position:center;
	position:relative;
	margin-bottom:50px;
	img.parallax {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		pointer-events:none;
	}
	h1 {
		color:@blue;
		.font(Poppins, 400, 64px);
		.max({ font-size:54px; }, 1280);
		.max({ font-size:36px; }, 960);
		letter-spacing:.1em;
		margin:0;
		padding:.8em .75em .75em;
		text-align:center;
		text-transform:uppercase;
	}
	#differences {
		background-color:fade(@blue, 70);
		padding:75px 25px;
		> div {
			display:grid;
			grid-gap:25px;
			grid-template-columns:repeat(6, 1fr);
			.max({ grid-template-columns:repeat(3, 1fr); }, 1280);
			.max({ grid-template-columns:repeat(2, 1fr); });
// 			.max({ grid-template-columns:repeat(1, 1fr); }, 540); Jarrod asked for it to remain 2 columns
			.max-width(1800px);
			//margin-bottom:50px;
		}
		.difference {
			color:#fff;
			.font(Poppins, 300, 18px);
			text-transform:uppercase;
			svg {
				fill:currentcolor;
				display:block;
				margin:0 auto 10px;
				max-width: 80px;
			}
			&:nth-of-type(1) {
				svg { transform: translatex(7%); }
			}
			&:nth-of-type(5) {
				svg { transform: translatex(-8%); }
			}
			&:nth-of-type(6) {
				svg { transform: translatex(-6%); }
			}
			p {
				.inherit();
				.font();
				text-align:center;
			}
		}
		a.learn-more {
			.max-width(320px);
			display:block;
			background-color:#fff;
			color:#fff;
			.font(Poppins, 300, 18px);
			padding:3px;
			letter-spacing:.075em;
			text-align:center;
			text-transform:uppercase;
			-webkit-clip-path: url(#my-clip-path);
			clip-path: url(#my-clip-path);
			span {
				display:block;
				background-color:#826040;
				color:#fff;
				.font(Poppins, 300, 18px);
				padding:1em;
				letter-spacing:.075em;
				text-align:center;
				text-transform:uppercase;
				-webkit-clip-path: url(#my-clip-path);
				clip-path: url(#my-clip-path);
				.transition(background-color, .3s, linear);
			}
			&:hover {
				span {
					background-color:@blue;	
				}
			}
		}
	}
}