.card {
	margin: 1rem;
	display: inline-block;
}

.card img {
	height: 12.2rem;
	border-radius: 1rem;
	background: linear-gradient(145deg, #e0e0e0, #ffffff);
	box-shadow: 18px 18px 36px #d4d4d4,
		-18px -18px 36px #ffffff;
}

.card h3 {
	margin: 0.8rem 0 0.4rem 0;
}

@media (prefers-color-scheme: dark) {
	.card img {
		box-shadow: none
	}
}

@media only screen and (max-width: 1111px) {
	.card img {
		height: 18rem;
		border-radius: 1.2rem;
	}
}

@media only screen and (max-width: 788px) {
	.card img {
		height: 16rem;
		border-radius: 1.2rem;
	}
}

@media only screen and (max-width: 720px) {
	.card img {
		height: 12rem;
		border-radius: 1.2rem;
	}
}

@media only screen and (max-width: 568px) {
	.card img {
		height: 10rem;
		border-radius: 1.2rem;
	}
}