.dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
	margin: 10px;
}
.affordable {
	background-color: white;
}
.non-affordable {
	background-color: black;
}
/* .container {
	background-color: #a8f0c6;
	padding: 20px;
	text-align: center;
} */

.dots-wrapper {
	display: grid;
	grid-template-columns: repeat(10, auto);
	grid-template-rows: repeat(5, auto); /* Ensure dots are placed in rows */
	justify-content: center;
}

.dot:hover {
	transition: transform 0.2s ease-in-out;
}