/*
tile-container {
	display: grid;

	grid-template-columns: repeat(auto-fit, minmax(var(--tile-size), 1fr));
	grid-template-rows: auto;
	gap: 1rem;

	font-size: 150%;

	padding: 2.5rem;

	justify-items: center;
	align-items: center;
}

tile {
	width: var(--square-tile-size);

	cursor: pointer;

	padding: 1em;

	border: 1px solid transparent;
	border-radius: 12px;


	transition: border, box-shadow, transform, var(--medium-speed);
}

tile:hover {
	border: 1px solid var(--not-black);

	box-shadow: 0 0 0.5em var(--not-black);

	transform: translateY(-4px);
}

tile hover-text {
	position: absolute;
	width: var(--tile-size);
	height: var(--tile-size);

	background: #000a;

	opacity: 0;

	transition: opacity var(--medium-speed);

	transform: translateY(calc(-1 * var(--tile-size) - 2px));

	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: fill;
}

hover-text:hover {
	opacity: 1;
}

tile img-container {
	display: flex;

	width: var(--tile-size);
	height: var(--tile-size);

	margin-bottom: 2px;
}

img-container img {
	width: 100%;
	height: 100%;

	image-rendering: pixelated;
}
*/