.card {
	border-radius: 0.5rem;
	overflow: hidden;
	position: relative;
	-webkit-border-radius: 0.5rem;
	-moz-border-radius: 0.5rem;
	-ms-border-radius: 0.5rem;
	-o-border-radius: 0.5rem;
}

.card-image {
	block-size: 100%;
	margin: 0;
	transition: 0.4s ease-out;
	-webkit-transition: 0.4s ease-out;
	-moz-transition: 0.4s ease-out;
	-ms-transition: 0.4s ease-out;
	-o-transition: 0.4s ease-out;
}

.card-image img {
	block-size: 100%;
	inline-size: 100%;
	object-fit: cover;
	vertical-align: middle;
}

.card-description {
	bottom: 0;
	color: var(--white);
	left: 1rem;
	position: absolute;
	transform: translateY(-1rem);
	transition: 0.4s ease-out;
	-moz-transform: translateY(-1rem);
	-moz-transition: 0.4s ease-out;
	-ms-transform: translateY(-1rem);
	-ms-transition: 0.4s ease-out;
	-o-transform: translateY(-1rem);
	-o-transition: 0.4s ease-out;
	-webkit-transform: translateY(-1rem);
	-webkit-transition: 0.4s ease-out;
}

.card-city {
	font: var(--body-bold);
	margin: 0;
	margin-block-end: 0.25rem;
}

.card-country {
	font: var(--body-regular);
	margin: 0;
}

.card.tirana,
.card.buenos-aires,
.card.bogota,
.card.seul,
.card.salvador,
.card.madrid {
	grid-row: span 2;
}

.card:hover {
	background: #000000;
}

.card:hover .card-image {
	opacity: 0.4;
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	-webkit-transform: scale(1.1);
}

.card:hover .card-description {
	opacity: 0;
	transform: translateY(0rem);
	-webkit-transform: translateY(0rem);
	-moz-transform: translateY(0rem);
	-ms-transform: translateY(0rem);
	-o-transform: translateY(0rem);
}

@media screen and (min-width: 768px) {
	.card.buenos-aires,
	.card.madrid {
		grid-row: span 1;
	}

	.card.habana,
	.card.quito,
	.card.santiago,
	.card.madrid {
		grid-row: span 2;
	}

	.card.pekin {
		grid-row: 3/5;
		grid-column: 2;
	}
}