/* ----- Breakpoint: XS 0000 ----- */

.site-feature {
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 100%;
	height: 512px;
	max-height: 631px;
	position: relative;
}
.site-feature-sm {
	background-size: cover;
	background-position: bottom center;
	height: 170px;
}

#home-feature {
	background-image: url(/images/2023/feature/home-default.jpg);
}
#home-feature h2 {
	font-size: 40px;
	color: var(--ae-head);
	font-weight: 400;
}

#relationships-feature {
	background-image: url(/images/2023/feature/relationships-default.jpg);
}

#pay-your-bill-feature {
	background-image: url(/images/2023/feature/pay-your-bill-default.png);
	background-size: 110%;
	background-position: top center, top right;
	height: auto;
}

/* ----- Breakpoint: SM 0576 ----- */

@media (min-width: 576px) {
	.site-feature {
		background-size: cover;
		background-position: center;
		height: 800px;
	}
	.site-feature-sm {
		background-size: cover;
		background-position: bottom center;
		height: 260px;
	}
}

/* ----- Breakpoint: MD 0768 ----- */

@media (min-width: 768px) {
	.site-feature {
		background-color: white;
		background-repeat: no-repeat;
		background-size: auto 100%;
		height: 500px;
		position: relative;
	}
	.site-feature-sm {
		background-size: cover;
		background-position: center center;
		height: 265px;
	}
	
	#home-feature {
		background-image: url(/images/2023/feature/home-md.jpg);
		background-size: cover;
		background-position: left 15%;
		height: 420px;
	}
	#home-feature h2, #home-feature p { color: white; }
	
	#relationships-feature {
		background-image: url(/images/2023/feature/relationships-md.jpg);
	}
	
	#pay-your-bill-feature {
		background-image: url(/images/2023/feature/pay-your-bill-md-reversed.jpeg);
		background-size: cover;
		background-position: center 25%;
		height: 480px;
	}
}

/* ----- Breakpoint: LG 0992 ----- */

@media (min-width: 992px) {
	#home-feature { height: 500px; }
	#home-feature h2 { font-size: 52px; }
}

/* ----- Breakpoint: XL 1200 ----- */

@media (min-width: 1200px) {
	#home-feature p { font-size: 20px; }
}

/* ----- Breakpoint: XXL 1400 ----- */

@media (min-width: 1400px) {
	#home-feature { background-image: url(/images/2023/feature/home-xxl.jpg); height: 631px; }
	#home-feature p { font-size: 26px; font-weight: 300; }
	#home-feature h2 { font-size: 65px; }
	#relationships-feature { background-position: center 20%; height: 370px; }
}