.choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
	font-family: Arial, sans-serif;
}

.choice {
	text-align: left;
	position: relative;
	cursor: pointer;
	height: 150px;
	transition: all 0.1s;
	border-radius: 8px;
	box-shadow: 0 0 0 1px #868686;
	font-size: 1rem;
	overflow: hidden;
	transform: scale(1);
}

.choice:hover {
    box-shadow: 0 0 0 1px #ffffff;

}

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

.choice:active {
	transform: scale(0.98);
}

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


.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;
	color: white;
	
}