.container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-evenly;
}

.project {
	/* justify-content: center; */
	text-align: center;
	/* padding: 10px; */
	border: 4px outset rgb(181, 151, 66);
	max-width: 400px;
	/* width: 50%; */
	flex: 1 1 calc(33.333% - 20px);
	/* 3 items per row, adjusts based on space */
}

.project a {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.entry {
	text-align: left;
	margin: auto;
	width: 80%;
}

@media (max-width: 800px) {
	.item {
		flex: 1 1 calc(50% - 20px);
		/* 2 items per row on small screens */
	}
}

@media (max-width: 500px) {
	.item {
		flex: 1 1 100%;
		/* 1 item per row on even smaller screens */
	}
}