.socials-container {
	display: flex;
	column-gap: 1rem;
	justify-content: center;
	width: 100%;
}

.socials {
	padding: 0.375rem;
	margin: -0.375rem;
	border-radius: 0.375rem;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
	transition-duration: 300ms;

	@media (min-width: 640px) {
		padding: 0.75rem;
		margin: -0.75rem;
	}
}

.icon {
	width: 1.25rem;
	height: 1.25rem;
	vertical-align: baseline;
	transition: fill 300ms cubic-bezier(0.4, 0, 0.2, 1);
	color: white;

	@media (min-width: 640px) {
		width: 1.75rem;
		height: 1.75rem;
	}
}

.socials:hover .icon {
	fill: #10b981;
}