/*
 * ===========
 * Footer
 * ===========
 */


/* -- Footer Section -- */

.footer-section {}
.footer-section .ribbon {
	overflow: clip;
	transform: scaleY(-1) translateY(50%);
}
.footer-section .ribbon img {
	width: 100%;
	max-width: none;
	height: var(--space-150);
	object-fit: cover;
}

.footer-section .footer {}
.footer-section .footer .foot {
	margin-bottom: var(--space-50);
}
.footer-section .footer .foot .title {
	font-size: var(--h6);
	padding-bottom: var(--space-25);
	text-transform: uppercase;
	font-weight: 600;
}
.footer-section .footer .foot .link {
	display: inline-block;
	font-size: var(--h6);
	padding: var(--space-min) 0;
}
.footer-section .footer .foot .social-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: var(--space-100);
	height: var(--space-100);
	margin-right: var(--space-min);
	border-radius: var(--space-min);
	background-color: var(--hue-primary);
}
.footer-section .footer .foot .social-link i {
	display: inline-block;
	font-size: var(--h4);
	color: var(--hue-light);
}

@media( min-width: 500px ) {
	.footer-section .ribbon img {
		width: calc(100% + (var(--card) * 0.666));
		transform: translateX(calc(var(--card) * -0.666));
	}
	.footer-section .foot-set {
		display: inline-grid;
		grid-template-columns: 1fr 1fr;
	}
}
@media( min-width: 1000px ) {
	.footer-section .ribbon img {
		width: calc(100% + (var(--card) * 1.5));
		transform: translateX(calc(var(--card) * -1.5));
	}
	.footer-section .foot-set:nth-child(1) {
		display: inline-block;
	}
	.footer-section .foot-set:nth-child(2) {
		display: inline-flex;
		gap: var(--space-100);
		justify-content: flex-end;
	}
	.footer-section .footer .quick-links,
	.footer-section .footer .residential,
	.footer-section .footer .commercial {
		text-align: right;
	}
}
@media( min-width: 1500px ) {
	.footer-section .logo {
		width: 75%;
	}
	.footer-section .ribbon img {
		height: var(--space-175);
		width: calc(100% + (var(--card) * 2.5));
		transform: translateX(calc(var(--card) * -2.5));
	}
	.footer-section .foot-set:nth-child(2) {
		gap: var(--space-200);
	}
}