/**
 * Included (Figma "V6 Split · Everything for slow days", variant A, PLAN.md B3 Q10e).
 *
 * 1440: white; the photo 864 x 700 at the left edge, no radius; the panel 576 (padding 80 / 120 /
 * 80 / 64) with a 392 column centred: title h1; the line (body-lg muted) 24 below; the icons 2 x 2
 * (188 cells, 16 apart; icon 24 + label 16/24, 12 apart) 24 below; the breakfast photo 144 x 180
 * (radius 12) with its line (16/24 ink, 224) 24 to the right, 24 below.
 * 834: the photo 834 x 400 on top; the panel (padding 56 / 32) puts the texts (519) beside the
 * breakfast photo (227 x 283.75, 24 apart): title, the breakfast line (16), the line (18), the
 * icons in two columns (rows 12 apart), all 12 apart.
 * 390: the photo 390 x 540; the panel (padding 32 / 20): the breakfast photo (350 x 437.5) first,
 * then title h2, the breakfast line, the line (both 16), the icons 2 x 2 (16 apart); 20 apart.
 */

.sw-included {
	display: grid;
	grid-template-columns: minmax(0, 864fr) minmax(0, 576fr);
	min-height: var(--sw-included-h, 700px);
}

.sw-included .sw-included__media {
	border-radius: 0;
}

.sw-included__panel {
	display: flex;
	align-items: center;
	padding: var(--sw-pad-t, var(--sw-section-pad)) var(--sw-gutter) var(--sw-pad-b, var(--sw-section-pad)) 64px;
}

.sw-included__content {
	width: 100%;
	max-width: 392px;
}

.sw-included__text {
	margin-top: 24px;
}

.sw-included__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.sw-included__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--sw-c-ink);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

.sw-included__icon {
	flex: none;
	color: var(--sw-c-ink);
}

.sw-included__breakfast {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 24px;
}

.sw-included__breakfast-media {
	flex: none;
	width: 144px;
	aspect-ratio: 144 / 180;
}

.sw-included__breakfast-text {
	max-width: 224px;
	color: var(--sw-c-ink);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

/* 834: photo on top; texts and the breakfast photo side by side. */
@media (max-width: 1024px) {
	.sw-included {
		display: block;
		min-height: 0;
	}

	.sw-included .sw-included__media {
		height: var(--sw-included-h, 400px);
	}

	.sw-included__panel {
		display: block;
		padding: var(--sw-pad-t, var(--sw-section-pad)) var(--sw-gutter) var(--sw-pad-b, var(--sw-section-pad));
	}

	.sw-included__content {
		display: grid;
		grid-template-columns: minmax(0, 519fr) minmax(0, 227fr);
		grid-template-areas:
			"title photo"
			"breakfast photo"
			"text photo"
			"items photo"
			". photo";
		grid-template-rows: auto auto auto auto 1fr;
		align-items: start;
		column-gap: 24px;
		max-width: var(--sw-max);
		margin-inline: auto;
	}

	.sw-included__breakfast {
		display: contents;
	}

	.sw-included__title {
		grid-area: title;
	}

	.sw-included__breakfast-text {
		grid-area: breakfast;
		max-width: none;
		margin-top: 12px;
	}

	.sw-included__text {
		grid-area: text;
		margin-top: 12px;
	}

	/* Two columns, the second one against the right edge of the 519 column; rows 12 apart. */
	.sw-included__items {
		grid-area: items;
		grid-template-columns: repeat(2, auto);
		justify-content: space-between;
		gap: 12px 16px;
		margin-top: 12px;
	}

	.sw-included__breakfast-media {
		grid-area: photo;
		width: 100%;
	}
}

/* 390: the breakfast photo first, then the texts, 20 apart. */
@media (max-width: 767px) {
	.sw-included .sw-included__media {
		height: var(--sw-included-h, 540px);
	}

	.sw-included__content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"photo"
			"title"
			"breakfast"
			"text"
			"items";
		grid-template-rows: none;
		row-gap: 20px;
	}

	.sw-included__breakfast-text,
	.sw-included__text,
	.sw-included__items {
		margin-top: 0;
	}

	/* 2 x 2, cells 167, 16 apart. */
	.sw-included__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: normal;
		gap: 16px;
	}
}