.locations {
	padding-block: 80px;
}

@media screen and (max-width: 992px) {
	.locations {
		padding-block: 40px;
	}
}

.locations__title {
	margin-bottom: 48px;
	max-width: 700px;
}

@media screen and (max-width: 768px) {
	.locations__title {
		margin-block: 24px;
	}
}

.locations__title h2 {
	margin-bottom: 16px;
}

@media screen and (max-width: 768px) {
	.locations__title h2 {
		font-size: 36px;
		line-height: 130%;
	}
}

.locations__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.locations__list .link {
	padding: 16px 24px;
	background-color: #fff;
	font-weight: 700;
	font-size: 16px;
	line-height: 130%;
	color: #313131;
	border: 1px solid rgba(24, 47, 85, .1);
	transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
}

.locations__list .link:hover {
	background-color: rgba(24, 47, 85, .05);
	color: #30466d;
	border-color: #30466d;
}

@media screen and (max-width: 768px) {
	.locations__list {
		padding: 10px;
		font-size: 12px;
	}
}