* {
	box-sizing: border-box;
}

.hidden {
	display: none;
}

#movie-grid {
	display: grid;
}

/* Default: One item per row (up to 300px) */
#movie-grid {
	grid-template-columns: 1fr;
	gap: 16px;
	
}

/* Two items per row (from 300px to 699px) */
@media (min-width: 600px) {
	#movie-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


.card {
	cursor: pointer;
	border: 1px solid var(--border);
	padding: 8px;
	border-radius: 4px;
	height: 100%;
	margin-bottom: 8px;
	h4 {
		height:50px;
		margin: 8px 8px 4px;
	}
}

.card img {
	margin: auto;
	display: block;
}

img {
	border-radius: 8px;
}

nav > ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, 100px);
}