/**
 * Maison Lune Wine (Figma Home "Wine"), full bleed.
 *
 * Desktop (1440): large photo 864 × 720 at the left; right column 576: small photo 576 × 360
 * above a 576 × 360 sand panel (padding 48 / container edge / 48 / 56, content centred).
 * Tablet (834): large photo 560 on top, then the small photo (334) beside the panel (500 × 400,
 * padding 40/32), then 56 of page paper. Phone (390): photo 540, panel (48/20), small photo 420.
 * The palette colours the panel; the section itself stays on the page colour.
 */

.ml.ml-feature {
	padding-top: var(--ml-pad-t, 0px);
	padding-bottom: var(--ml-pad-b, 0px);
	background: transparent;
}

.ml-feature__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	grid-template-rows: auto auto;
}

.ml-feature__media {
	position: relative;
	overflow: hidden;
	min-width: 0;
	background: var(--ml-c-dark);
}

.ml .ml-feature__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ml-feature__media--main {
	grid-column: 1;
	grid-row: 1 / span 2;
	min-height: 720px;
}

.ml-feature__media--side {
	grid-column: 2;
	grid-row: 1;
	aspect-ratio: 576 / 360;
}

/* 100% is the panel's grid area (two fifths of the section), so calc(125% - 600px) is the
   distance from the section edge to the 1200 container: 120px at 1440. */
.ml-feature__panel {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 360px;
	padding: 48px max(var(--ml-gutter), calc(125% - 600px)) 48px 56px;
	background: var(--ml-bg);
	color: var(--ml-text);
}

.ml-feature--single .ml-feature__panel {
	grid-row: 1 / span 2;
}

.ml-feature__body {
	width: 100%;
	min-width: 0;
}

.ml-feature__lines {
	display: grid;
	gap: 8px;
	margin-top: 20px;
}

.ml-feature__lines:first-child {
	margin-top: 0;
}

.ml-feature__line {
	color: var(--ml-text);
	font-size: 16px;
	line-height: 24px;
}

/* Tablet (834). */
@media (max-width: 1024px) {
	.ml.ml-feature {
		padding-bottom: var(--ml-pad-b, 56px);
	}

	.ml-feature__grid {
		grid-template-columns: minmax(0, 334fr) minmax(0, 500fr);
		grid-template-rows: auto auto;
	}

	.ml-feature__media--main {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: 0;
		height: 560px;
	}

	.ml-feature__media--side {
		grid-column: 1;
		grid-row: 2;
		aspect-ratio: auto;
		min-height: 400px;
	}

	.ml-feature__panel {
		grid-column: 2;
		grid-row: 2;
		min-height: 400px;
		padding: 40px 32px;
	}

	.ml-feature--single .ml-feature__panel {
		grid-column: 1 / -1;
		grid-row: 2;
		min-height: 0;
		padding: 56px var(--ml-gutter);
	}

	.ml-feature__title {
		font-size: 40px;
		line-height: 45px;
	}
}

/* Phone (390). */
@media (max-width: 767px) {
	.ml.ml-feature {
		padding-bottom: var(--ml-pad-b, 0px);
	}

	.ml-feature__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-feature__media--main {
		height: 540px;
	}

	.ml-feature__panel,
	.ml-feature--single .ml-feature__panel {
		grid-column: 1;
		grid-row: 2;
		min-height: 0;
		padding: 48px var(--ml-gutter);
	}

	.ml-feature__media--side {
		grid-column: 1;
		grid-row: 3;
		min-height: 0;
		height: 420px;
	}

	.ml-feature__title {
		font-size: 32px;
		line-height: 36px;
	}
}