* {
	margin:0;
	padding: 0;
	box-sizing: border-box;
}

h1, h2, h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:root {
    --bg-color: hsl(220, 13%, 18%);
    --fg-color: hsl(0, 0%, 100%);
}

body{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-size: 16px;
}

h1 {
	text-align: center;
	padding: 30px;
}

.container{
	margin:1rem;
    display: grid;
	justify-content: center;
	grid-template-columns: repeat(auto-fill, minmax(384px, 1fr));
    grid-auto-rows: 400px;
    gap:1em;  
    grid-auto-flow: row;
}

.box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 4px 4px 8px rgba(255,255,255,0.3);		
}

img:hover{
	cursor: pointer;
}

@media only screen and (max-width: 815px) {
    /* phones = 767 */
	.container{
		grid-auto-rows: auto;
	}
}