html, body {
	padding: 0px;
	margin: 0;
}

ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 6 equal-width columns */
  gap: 20px; /* optional spacing between items */
  list-style: none;
  padding: 20px;
  margin: 0;
}

@media (max-width: 968px) {
	ul {
		grid-template-columns: repeat(4, 1fr); /* 6 equal-width columns */
	}
}

@media (max-width: 640px) {
	ul {
		grid-template-columns: repeat(2, 1fr); /* 6 equal-width columns */
	}
}
ul li {
  aspect-ratio: 4 / 5; /* maintain 4:5 width:height */
  background-color: #f7f7f7; /* for visibility, remove in production */
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  overflow: hidden;
  border-radius: 10px;
  font-family: arial;
  font-size: 12px;
}

ul li:first-of-type {
	text-align: center;
	padding: 0 20px;
	height: 100%;
	width: calc(100% - 40px);
}

img {
	fit: cover;
	width: 100%;
}