.cardsbox {
	display: flex;
	align-items: center;
	margin: 3vh 0;
}

.card {
	--cardWidth: 300px;
	
	max-width: var(--cardWidth);
	background-color: var(--secondaryBackground);
	display: flex;
	flex-direction: column;
	border-radius: 5px;

	transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
	--offsetX: 3px;
	--offsetY: 4px;

	transform: translate(calc(var(--offsetX) * -1), calc(var(--offsetY) * -1));
	box-shadow: var(--offsetX) var(--offsetY) 5px hsl(229, 22%, 15%);
}

.card img {
	max-width: var(--cardWidth);
	width: var(--cardWidth);
	object-fit: contain;
	border-radius: 5px 5px 0 0;

	filter: brightness(87%) saturate(120%);
}

h4 {
	color: #eee;
	font-family: Play;
	font-size: 1.5em;
	--leftMargin: 1vw;
	margin-left: var(--leftMargin);
	margin: 2vh 1vw 2vh 1vw;
	width: calc(var(--cardWidth) - (var(--leftMargin) * 2));
}