.social-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-items: center;
	width: 310px;
}

.social-links a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--space-10);
	height: var(--space-10);
	background-color: var(--primary-light);
	border-radius: var(--rounded-md);
}

.social-links a:hover {
	background-color: var(--highlight);
}

.social-links a i {
	font-size: 30px;
	color: var(--primary-dark);
}

.social-links a.facebook i {
	position: absolute;
	bottom: -1px;
	font-size: 36px;
}

@media (min-width: 400px) {
	.social-links {
		column-gap: var(--space-12);
	}
}

@media (min-width: 1200px) {
	.social-links {
		width: 250px;
		column-gap: var(--space-8);
	}
}