.card {

	&:not(.-contained) {

		.image-holder {

			@include border-radius;
		}
	}

	.image-holder {
		overflow: hidden;
		position: relative;
		margin: 0;

		> a {
			display: block;
		}

		img {
			min-width: 100%;

			@include transition;
		}
	}

	// Metro

	&.-metro {

		&:not(.-no-media) {
			
			.image-holder {
				padding-bottom: 100%;
				position: relative;

				img,
				iframe {
					position: absolute;
					left: 0;
					top: 0;

					@include metro;
				}
			}
		}
	}

	// Contained

	&.-contained {

		.image-holder {

			@include border-top-radius;
		}

		.card-details {
			background-color: $color-neutral-6;
			
			@include border-bottom-radius;
		}
	}

	// Image scaling

	&.-img-scale {

		&:hover {

			.image-holder {
				
				img {
					transform: $scale;
				}
			}
		}
	}

	// Image overlay

	&.-img-overlay {

		.image-holder {
	
			&::after,
			.overlay {
				background: linear-gradient(90deg, rgba($color-red, 0.50) 0%, rgba(#7544dd, 0.50) 100%);
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				opacity: 0;

				@include pseudo;
				@include transition(opacity);
			}
		}

		&:hover {

			.image-holder {

				&::after,
				.overlay {
					opacity: 1;
				}
			}
		}
	}

	// Image greyscale

	&.-img-greyscale:not(:hover) {

		.image-holder {

			img {
				filter: grayscale(1);
			}
		}
	}

	&:not(.-with-overlay):not(.-image-only) {

		.card-details {
			padding-top: 1.5rem;
		}

		&.-contained {

			.card-details {
				padding-bottom: 1.5rem;

				@include spacer2x(padding-left);
				@include spacer2x(padding-right);
			}
		}
	}

	&:not(.-layout4):not(.-layout6) {

		.overlay-details {
			color: $color-white;
		}
	}

	.overlay-details {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 1;

		@include flex;
		@include spacer2x;

		@include sm-screen {

			padding-left: $grid-spacer;
			padding-right: $grid-spacer;
		}

		&:not(.-top) {
			bottom: 0;
		}

		&:not(.card-details) {

			p {
				margin: 0;
			}
		}

		&.-top {
			top: 0;
		}
	}
	
	&:hover {

		.-fade-up,
		.-fade-down {

			@include faded;
		}
	}
}

// Double width card overrides

.double-width {

	&:not(.vc_col-lg-12) {

		.card {

			// Metro

			&.-metro {

				.image-holder {
					padding-bottom: calc(50% - #{$grid-spacer});
				}
			}
		}
	}
}

.minimal-scheme {

	.card {

		.image-holder {

			@include border-radius(0);
		}
	}
}