.skills {
	padding: var(--padding-block);
}

.skills__group:not(:first-of-type) .skills__subtitle {
	margin-top: var(--space-subsection);
}

.skills__subtitle {
	font-size: var(--font-size-subtitle-xxs);
	font-weight: normal;
	margin-bottom: var(--space-subsubsection);

	&::before {
		content: '$ ';
	}

	&::after {
		content: '_';
		animation: underline 500ms infinite alternate;
	}
}

.skills__list {
	list-style-type: none;
	justify-content: center;
}

.skills__item {
	background-color: var(--color-primary-dark-over);
	font-size: var(--font-size-text);
	text-align: center;
	border: .1rem solid var(--color-primary-dark-half);
	border-radius: var(--border-radius-default);

	width: 12.8rem;
	padding: 1em;
}

.skills__item .icon {
	display: block;
	margin: 0 auto .2em;
}

@keyframes underline {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (width >=48em) {
	.skills__subtitle {
		text-align: center;
	}

	.skills__item {
		min-width: fit-content;
	}

	.skills__item .icon {
		display: initial;
		margin: auto;
	}
}