.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
	gap: 1.5em;

	margin: 1em 0;
}

.contact-card {
	margin: 0.25em 0;
	padding: 1.0em;

	text-align: center;
	text-decoration: none;

	background-color: var(--col-background);
	box-shadow: 0 0 0.5em var(--col-main);
	border: 1px solid var(--col-main);
	border-radius: var(--corner-radius-big);

	transition: var(--transition-speed-fast);

	&:hover {
		transform: scale(1.05);
		
		background-color: var(--col-highlight-dark);
		box-shadow: 0 0 0.75em var(--col-highlight);
		border: 1px solid var(--col-highlight);	
	}
}

img.card-icon {
	--size: 3.33em;

	max-width: var(--size);
	max-height: var(--size);
	object-fit: contain;

	margin: 0.5em;
}
img.dark {
	padding: 0.1em;
	background: white;
	border-radius: var(--corner-radius);
}

.card-label {
	margin: 0.25em;

	font-weight: bold;
	letter-spacing: 0.075em;
}

a.contact-card .card-label::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: '🔗';
	padding-right: 0.33em;
	opacity: 75%;
}

.copy-button .card-label::before {
	font-family: PublicPixel, 'Courier New', Courier, monospace;
	font-size: 33%;
	content: '❏';
	padding-right: 0.33em;
	opacity: 75%;
}
.contact-card.copy-button::before {
	display: none;
}