.media-box,
.media-box .m_card {
	--column-layout: [L] var(--inline-start-size, 1fr) [C] var(--inline-end-size, 1fr) [R];
	--row-layout: 
		[T upper-start] var(--upper-size, 1fr) 
		[M upper-end lower-start] var(--lower-size, auto) 
		[B lower-end];
	--area-layout: "nw ne" "sw se";
	--gap: 0;
}

.media-box {
	--area-width: 90%;
	--title-bg: hsl(var(--title-hue, 37) 15% 90% / var(--title-opac, 72%));
	--transition: 650ms 150ms ease-out;
	list-style: none;
	position: relative;
	max-width: 100vw;
	overflow: hidden;
	box-shadow: none;

	background-image: var(--hero-image);
	background-position: var(--hero-pos, center center);
	background-size: cover;
	background-repeat: no-repeat;
	margin-inline: calc(-1 * var(--gutter, var(--spacing, var(--size-6))));

	[class*="wrap-"],
	.card-title,
	.card-body,
	.card-foot {
		grid-area: var(--placement);
		margin-inline: auto;
	}

	&:has(> .card-title + .card-body) {
		--gap: var(--gutter, var(--spacing));
	}
	[class*="wrap-"] {
    display: flex;
		flex-direction: column;
    gap: var(--spacing);
		margin-block: var(--gutter, var(--spacing));
	}
	> .card-title {
		margin-block: var(--gutter, var(--spacing));
	}
	> .card-body {
		margin-block: var(--gutter, var(--spacing));
	}
	
	.card-title,
	.card-body {
		text-align: center;
		text-wrap: balance;
		max-width: var(--area-width);
	}
	.card-body,
	.card-foot {
		background-color: transparent;
	}
}

:where(.media-box .card-foot) {
	--placement: M / L / B / R;
}

.wrap-nw,.-nw {--placement: nw}
.wrap-ne,.-ne {--placement: ne}
.wrap-se,.-se {--placement: se}
.wrap-sw,.-sw {--placement: sw}
.wrap-fullsize {
	--area-width: 75%;
	--placement: T / L / M / R;
}
.wrap-upper,
.-upper {
	--area-width: 75%;
	--placement: T / L / M / R;
	max-height: 100%;
	place-self: center;
}
.wrap-lower,
.-lower {
	--area-width: 75%;
	--placement: M / L / B / R;
	place-self: center;
	max-height: 100%;
}
.-nw {
	grid-area: var(--placement);
	place-self: center start;
}
.-ne {
	grid-area: var(--placement);
	place-self: center end;
}
.-se {
	grid-area: var(--placement);
	place-self: center end;
}
.-sw {
	grid-area: var(--placement);
	place-self: center start;
}

.fade-left {
	-webkit-mask-image: -webkit-linear-gradient(to left, var(--background-color) var(--cross-point, 45%), transparent);
	mask-image: linear-gradient(to left, white var(--cross-point, 45%), transparent);
}
.fade-right {
	-webkit-mask-image: -webkit-linear-gradient(to right, var(--background-color) var(--cross-point, 45%), transparent);
	mask-image: linear-gradient(to right, white var(--cross-point, 45%), transparent);
}