.footer {
	background-color: var(--neutral-700);
}

.footer__wrap {
	border: var(--border);
	border-top: 0;
}

.footer__line {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding: 32px;

	&:first-child,
	&:last-child {
		border: var(--border);
		border-left: 0;
		border-right: 0;
	}
}

.footer__label {
	background-color: #fff;
	clip-path: var(--clip-path-badge);
	line-height: var(--line-height-tight);
	padding: 8px;
	color: var(--neutral-500);
	width: fit-content;
	height: fit-content;
}

.footer__content {
	grid-column: span 3;
}

.footer__top {
	display: flex;
	align-items: center;
	gap: 64px;
}

.footer__phone {
	font-size: var(--text-heading_s);
	line-height: var(--line-height-medium);
	color: #fff;
	font-weight: 700;
}

.footer__email {
	color: #fff;
	line-height: var(--line-height-medium);
	font-size: var(--text-heading_xs);
}

.footer__desc {
	color: var(--neutral-500);
}

.footer__copy {
	padding: 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-body);
	color: var(--neutral-300);
}

.footer__copy-links {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.footer__copy-link {
	color: inherit;
	transition: color var(--transition-surface-delay);

	&:hover {
		color: #fff;
	}
}

@media(width <= 1370px) {
	.footer__line {
		grid-template-columns: .5fr 1fr;
	}
}

@media(width <= 1160px) {
	.footer__copy {
		gap: 16px;
		align-items: flex-start;
		flex-direction: column;
	}
}

@media(width <= 1024px) {
	.footer__wrap {
		border-top: var(--border);
		position: relative;
		top: 28px;
	}

	.footer__copy {
		gap: 16px;
		align-items: flex-start;
		flex-direction: column;
		margin-top: 28px;
	}

	.footer__line {
		row-gap: 8px;
	}
}

@media(width <= 900px) {
	.footer__line {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.footer__top {
		flex-wrap: wrap;
		gap: 8px;
	}

	.footer__desc {
		margin-top: 8px;
	}

	.footer__line,
	.footer__copy {
		padding: 20px;
	}

	.footer__phone {
		font-size: 22px;
	}
}

@media(width < 768px) {
	.footer__top {
		flex-direction: column;
		align-items: flex-start;
	}
}