.grid{
	display: grid;
	gap: 0.5em;
	justify-content: center;
	grid-template-columns: 1fr;
}
.grid a{
	background: #FFF1;
	text-decoration:none;
	color:#FFF8;
	padding: 1em;
	border-radius: 0.3em;
	outline: 0;
	cursor:pointer;
}

.grid a:hover{
	background: #FFF3;
	color:#FFF;
}

.buttons a:focus,
.grid a.selected{
	background: var(--groen);
	color:#FFF;
}

.buttons a{
	display:flex;
	justify-content:center;
	gap: 0.3em;
	margin:1em 0;
}

.buttons a svg{
	font-size:1.3em;
}

@media (min-width: 800px) 
{
	.xgrid:not(.block){grid-template-columns: 1fr 1fr;}
	.grid-4{grid-template-columns: repeat(4, 1fr)}
	.grid-5{grid-template-columns: repeat(5, 1fr)}
	.grid-10{grid-template-columns: repeat(5, 1fr)}
	.grid-10{grid-template-columns: repeat(10, 1fr)}
}

.grid-2{grid-template-columns: repeat(2, 1fr)}
.grid-3{grid-template-columns: repeat(3, 1fr)}