.layout--image-card-grid {
	container: image-card-grid / inline-size;
	.value-card {
		position: relative;
		overflow: hidden;
		min-height: calc(100cqi / 3);
		@media (width < 1024px) {
			min-height: calc(100cqi / 1.25);
		}
        height: 100%;
		isolation: isolate;
		padding: 2rem;
		display: grid;
		align-content: end;
		justify-items: start;

		> img {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
		&:before {
			content: '';
			position: absolute;
			z-index: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50%;
			background-image: linear-gradient(to top, 
				rgba(0,0,0,.8) 0%,
				rgba(0,0,0,.6) 50%,
				rgba(0,0,0, 0) 100%
				);
		}

		> * {
			position: relative;
			z-index: 1;
			color: white;
		}
		
	}
}