body { 
	background-color: #222; 
	color: #eee; 
	font-family: Arial, sans-serif; 
	text-align: center; 
	padding: 10px;
	margin: 10px;
}

h1 { 
	color: #f4d35e;
}

.back_img {
	width: 100px;
	height: 100px;
}

img.thumbnail {
	height: 200px;
	width: 200px;
	object-fit: cover;
}

/* define what the CSS is before and after the hover */
.map_trans {
  transition: transform 150ms ease, box-shadow 150ms ease;
  display: inline-block; /* make it a transformable box */
}

/* define what the CSS is during the hover */
.map_trans:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
}

/* 
./templates/maps.html gallery grid 
list-style: none; padding: 0; margin: 0; - removed the bullet points from the list
gap: 1rem; - spaces everything evenly
*/
.map_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.map_tile {
}