.choices {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
	gap: 10px;
	font-family: Arial, sans-serif;
}

.choice {
    text-align: left;
	position: relative; /* Needed for absolute positioning of children */
	width: 250px;
	height: 200px; /* Give the card a fixed height */
	cursor: pointer;
	transition: box-shadow 0.1s;
	border-radius: 8px;
    box-shadow: 0 0 0 1px #a6a6a6;
    font-size: 1rem;
	overflow: hidden; /* Keep rounded corners on the image */
}

.choice:hover {
    box-shadow: 0 0 0 3px #a6a6a6;
	background-color: #33333375;
}

.choice.selected {
	box-shadow: 0 0 0 4px #4caf50;
	background-color: #4caf4f39;
}

.choice img {
	position: absolute;
	top: 0;
	left: 0;
    width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1; /* Behind the text */
}


.choiceTextContainer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%);
	padding: 10px;
	z-index: 2; /* On top of the image */
	color: white;
}