main {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;

	width: 60%;
	margin-left: 15%;
}

.game {
	display: flex;
	width: var(--game-width);
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid black;

	cursor: pointer;
	opacity: 1;
	margin: 10px;
	transition: all ease 1s;
}

.game.hide {
	opacity: 0;
}
.game.left {
	margin-right: 50px;
}
.game.right {
	margin-left: 50px;
}

.game img {
	width: var(--game-width);
	transform-origin: center;
	transition: all ease .2s;
}

.game:hover img {
	transform: scale(1.1);
}

.game svg {
	position: absolute;
	z-index: 1;
}

.game svg text {
	font-weight: bold;
}
@media (max-width: 800px) {
	.game, .game img {
		width: var(--game-width-phone);
	}
	main {
		margin-top: 50px;
	}
}

:root {
	--game-width: 400px;
	--game-width-phone: 300px;
}