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

.site-footer {
	background: var(--color-footer-bg);
}

.site-footer__inner {
	padding-block: 64px 32px;
	padding-inline: var(--container-padding-inline);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.site-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.site-footer__logo {
	width: 140px;
	height: 52px;
}

.site-footer__tagline {
	font-family: var(--font-primary);
	font-weight: var(--fw-regular);
	font-size: calc(13px * var(--fs-scale));
	line-height: 1.45;
	color: var(--color-text-muted);
	max-width: 260px;
	margin: 0;
}

.site-footer__heading {
	font-family: var(--font-primary);
	font-weight: var(--fw-bold);
	font-size: 13px;
	color: #ffffff;
	margin: 0 0 10px;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer__list a,
.site-footer__list li {
	font-family: var(--font-primary);
	font-weight: var(--fw-regular);
	font-size: calc(13px * var(--fs-scale));
	color: var(--color-text-muted);
	text-decoration: none;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
	color: #ffffff;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #333333;
	font-family: var(--font-primary);
	font-weight: var(--fw-regular);
	font-size: calc(12px * var(--fs-scale));
	color: var(--color-text-muted-dark);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	gap: 20px;
}

.site-footer__legal a {
	font-family: var(--font-primary);
	font-size: calc(12px * var(--fs-scale));
	color: var(--color-text-muted-dark);
	text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus {
	color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
		row-gap: 32px;
	}
}

@media (max-width: 560px) {
	.site-footer__inner {
		padding-block: 48px 24px;
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}