/* --------------------------------------------------------------
# Pages
-------------------------------------------------------------- */

.cardex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: var(--t4);
	border: 1px solid #eaeaea;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background-color: var(--white);
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100%;
}

@media screen and (min-width: 768px) {
	.cardex:hover {
		-webkit-transform: translateY(-8px);
		-ms-transform: translateY(-8px);
		transform: translateY(-8px);
		-webkit-box-shadow: 0 50px 30px -40px rgba(0, 0, 0, 0.1);
		box-shadow: 0 50px 30px -40px rgba(0, 0, 0, 0.1);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.cardex img {
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
}

.cardex * {
	margin-bottom: var(--t4);
}

.cardex *:last-child {
	margin-bottom: 0;
	margin-top: auto;
}

@media screen and (min-width: 768px) {
	.cardex:hover img {
		-webkit-filter: grayscale(0);
		filter: grayscale(0);
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
}