.contact-list {
	margin: 2rem 0 4rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: 2rem;

	.contact-list__row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.contact-list__label {
		width: fit-content;
		margin: 0 0 0.8rem;
		padding: 0.3rem 0.6rem;
		font-family: "Oswald", sans-serif;
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--color-off-white);
		background-color: var(--color-primary);
		background-image: url("/assets/images/noise.svg");
		background-repeat: repeat;

		a {
			text-decoration: none;
			color: var(--color-off-white);
		}

		&:hover {
			background-color: var(--color-accent--darker);
		}
	}

	.contact-list__value {
		margin: 0;
		padding: 0;
		font-weight: 500;
	}

	/* Swap the label block to the accent color as a playful hover response. */
	.contact-list__label:has(+ .contact-list__value a:hover) {
		background-color: var(--color-accent--darker);
	}
}

.contact-list-header {

	font-weight: normal;
	font-family: "Google Sans Flex", sans-serif;
	text-transform: none;

}