.l-cards {
	margin: 0 0 var(--space-m) 0;
}

.l-card__container {
	container-type: inline-size;
	container-name: l-card;
	margin-bottom: var(--space-m);
}

.l-card {
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 3px 1px var(--cool3);
	height: 100%;
	padding: 0;
	background: var(--cool5);

	& .l-card__heading {
		margin-top: var(--space-m);
		margin-bottom: var(--space-m);
	}

	& p {
		color: var(--cool-1);
	}
}

.l-card__header {
	height: 20rem;
	background-repeat: no-repeat;
	background-position: bottom center;
	/** -webkit-filter: grayscale(1);
	filter: grayscale(1);
	background-color: var(--cool3);
	**/

	& h3,
	& h4,
	& p {
		padding: 1rem;
		/*
		color: var(--light);
		text-shadow: 0px 0px 12px var(--cool-1);
		*/
	}

	& h3,
	& h4 {
		font-size: var(--fs-4);
	}
}

.l-card__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	padding: 1rem;
	flex-basis: fit-content;
	flex-grow: 1;

	& .c-button {
		margin-top: auto;
	}
}

@container l-container (min-width: 640px) {

	.l-cards {
		display: grid;
		row-gap: var(--space-m);
		grid-template-columns: 48% 48%;
		justify-content: space-between;

		& .l-card__container {
			margin-bottom: 0;

			&:first-child {
				grid-column: span 2;

				& .l-card {
					flex-direction: row;
					-webkit-column-gap: var(--space-m);
					-moz-column-gap: var(--space-m);
					column-gap: var(--space-m);
				}

				& .l-card__header {
					height: 100%;
					flex-basis: 30rem;
				}
			}
		}
	}
}
.test {
	width: auto;
}