*, 
*::after, 
*:after,
*::before, 
*:before { box-sizing: border-box; }
:root {
	--bg-color: #cfd8dc;
	--font-base: 16px;
	--gutter: var(--font-base);
	--card-shadow: rgba(0,0,0,.4) 0 3px 4px;
}	
body { 
	font-size: var(--font-base);
	background-color: var(--colorGrey); 
}

main { 
	padding: 1rem; 
	padding-bottom: 0;
}
main .main-title { text-align: center; }


/*------------------*\
	GALLERY
\*------------------*/
.Gallery {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 45px;
}
/* .Gallery > * { outline: 4px solid steelblue; } */
	.Gallery-article {
		border-radius: .5em;
		margin-bottom: var(--gutter);
		overflow: hidden;
		box-shadow: var(--card-shadow);
	}
	.Gallery-image { 
		display: block;
		width: 100%;
	}

@media screen and (min-width: 400px) {
	.Gallery {
		width: 80%; 
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width: 620px) {
	.Gallery-article { 
		width: calc((100% / 2) - var(--gutter));
	}
	.Gallery-article:nth-child(even) { margin-left: var(--gutter); }
}
@media screen and (min-width: 920px) {
	.Gallery-article { 
		width: calc((100% / 3)) - var(--gutter));
	}
}