.social-links {
	--key-color: var(--red);

	.title {
		margin-bottom: var(--space-4);
		font-family: var(--font-soft);
		font-weight: var(--font-weight-bold);
		font-size: var(--text-base);
		line-height: normal;
		text-align: center;
		text-transform: uppercase;
		color: var(--white);
	}

	.social-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.social-network {
		padding: 0;
		margin: 0;
	}

	.social-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--space-10);
		aspect-ratio: 1;
		font-size: 18px;
		text-decoration: none !important;
		color: var(--white);
		background-color: var(--key-color);
		border: 2px solid var(--key-color);
		border-radius: var(--rounded-circle);
		transition:
			color var(--transition-appendix),
			background-color var(--transition-appendix);
	}

	@media (hover: hover) {
		.social-link:hover {
			color: var(--key-color);
			background-color: var(--white);
		}
	}

	@media (min-width: 64em) {
		.title {
			text-align: left;
		}

		.social-list {
			justify-content: start;
		}
	}
}

/*----- inside social panel -----*/

.panel-social .social-links {
	--key-color: var(--blue-dark);

	margin-bottom: var(--space-10);

	@media (min-width: 64em) {
		margin-bottom: 30px;

		.title {
			text-align: center;
		}

		.social-list {
			justify-content: center;
		}

		.social-link {
			width: 50px;
		}
	}
}