.tmi-footer {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding: 56px 56px 24px;
	background: var(--tmi-dark-900);
	color: var(--tmi-dark-300);
}

.tmi-footer-main {
	display: grid;
	grid-template-columns: 280px minmax(420px, 1fr);
	gap: 24px;
	align-items: start;
}

.tmi-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tmi-footer-brand p,
.tmi-footer-brand strong,
.tmi-footer-bottom p {
	margin: 0;
}

.tmi-socials {
	display: flex;
	align-items: center;
	gap: 0;
}

.tmi-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.tmi-socials img {
	width: 20px;
	height: 20px;
}

.tmi-footer-links {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: end;
	/* Figma spaces columns by pr-40 + the 24px row gap ≈ 64px. */
	gap: 64px;
}

.tmi-footer-links nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tmi-footer-links h3 {
	margin: 0 0 8px;
	color: var(--tmi-white);
}

.tmi-footer a {
	color: var(--tmi-dark-400);
	text-decoration: none;
}

.tmi-footer-links a::before,
.tmi-footer-bottom a + a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 2px;
	margin-right: 8px;
	vertical-align: middle;
	background: currentColor;
}

.tmi-footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--tmi-dark-700);
}

.tmi-footer-bottom div {
	display: flex;
	gap: 16px;
}

.tmi-credit {
	white-space: nowrap;
}

.tmi-footer a.tmi-credit-link {
	color: var(--tmi-amber);
	text-decoration: none;
}

.tmi-footer a.tmi-credit-link:hover {
	text-decoration: underline;
}

@media (max-width: 1200px) {
	.tmi-footer-main,
	.tmi-footer-links {
		grid-template-columns: 1fr 1fr;
		justify-content: start;
	}
}

@media (max-width: 700px) {
	.tmi-footer {
		padding: 40px 18px 24px;
	}

	.tmi-footer-main,
	.tmi-footer-links,
	.tmi-footer-bottom {
		grid-template-columns: 1fr;
		flex-direction: column;
	}

	.tmi-footer-bottom,
	.tmi-footer-bottom div {
		flex-direction: column;
	}

}