.buttons-grid {
	--column-width: 1em;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(88px + var(--column-width)), 1fr));
	justify-items: center;
	align-items: start;

	margin: 1em 0 2.5em;
}
.buttons-grid.no-button {
	--column-width: 4em;
}
@media (orientation: portrait) {
	.buttons-grid.no-button {
		--column-width: 2em;
	}
}

.site-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	a {
		line-height: 0;
	
		margin: 0.33em 0;
		padding: 0.1em;
		background-color: black;

		box-shadow: 0 0 0.33em var(--col-main);
		border: 1px solid var(--col-main);
		border-radius: var(--corner-radius);

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

		&:hover {
			transform: scale(1.1);

			box-shadow: 0 0 0.5em var(--col-highlight);
			border: 1px solid var(--col-highlight);
		}
	}

	div {
		line-height: 1.1;
		font-size: 0.8rem;
	}
	
	.no-button {
		line-height: 0.8;
		padding: 0.5em;
		text-decoration: none;
		font-size: 0.8rem;
	}
}