/**
 * An Nam Menu list (Figma "Seasonal menu", 25:6513 / 25:7266 / 25:7998). Cream section.
 *
 * Desktop: four groups 48 apart, each two columns of 576, 48 apart: the text (title Newsreader
 * 40 / 110%, the intro 24 under it 16 / 150% muted, the dishes 24 under that, 24 apart) and the
 * photo (576 × 408, Drinks 476, radius 12, caption 12 under it), right or left as the group
 * says. A dish: 1px rule (muted at 35%, above every dish), 12 under it the name (Newsreader 28 / 110%), the price
 * (18 / 150%) and the marks (12 / 150%, muted) on one line 16 apart, and 12 under them the line
 * (16 / 150%, muted). The note (13 / 150%, muted) 48 under the last group, the button 48 under it.
 * Tablet: the photo above the text (770 × 360), 24 apart. Phone: photo 350 × 240, title 32,
 * dish 23 (the marks go under the name when the line is full), button full width.
 */

.an-menu-list__group + .an-menu-list__group {
	margin-top: 48px;
}

.an-menu-list__group--photo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: start;
}

.an-menu-list__group--photo-left .an-menu-list__photo {
	grid-row: 1;
	grid-column: 1;
}

.an-menu-list__group--photo-left .an-menu-list__text {
	grid-row: 1;
	grid-column: 2;
}

.an-menu-list__text {
	min-width: 0;
}

.an .an-menu-list__group-title {
	font-size: var(--an-fs-h2);
	line-height: var(--an-lh-tight);
}

.an-menu-list__intro {
	margin-top: 24px;
	color: var(--an-muted);
	font-size: var(--an-fs-body);
	line-height: var(--an-lh-text);
}

.an-menu-list__dishes {
	margin-top: 24px;
}

.an-menu-list__dish {
	padding-top: 12px;
	border-top: 1px solid var(--an-menu-rule, color-mix(in srgb, var(--an-muted) 35%, transparent));
}

.an-menu-list__dish + .an-menu-list__dish {
	margin-top: 24px;
}

.an-menu-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
}

.an .an-menu-list__name {
	font-size: var(--an-fs-h3);
	line-height: var(--an-lh-tight);
}

.an-menu-list__price {
	color: var(--an-heading);
	font-size: var(--an-fs-body-lg);
	line-height: var(--an-lh-text);
}

.an-menu-list__marks {
	color: var(--an-muted);
	font-size: var(--an-fs-label);
	line-height: var(--an-lh-text);
}

.an-menu-list__description {
	margin-top: 12px;
	color: var(--an-muted);
	font-size: var(--an-fs-body);
	line-height: var(--an-lh-text);
}

.an-menu-list__photo .an-figure__media {
	height: var(--an-photo-h, 408px);
}

.an-menu-list__note {
	margin-top: 48px;
	color: var(--an-muted);
	font-size: 13px;
	line-height: var(--an-lh-text);
}

.an-menu-list__action {
	margin-top: 48px;
}

/* Tablet (834): one column, the photo above the text. */
@media (max-width: 1024px) {
	.an-menu-list__group--photo {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.an-menu-list__group--photo .an-menu-list__photo,
	.an-menu-list__group--photo-left .an-menu-list__photo {
		grid-row: 1;
		grid-column: 1;
	}

	.an-menu-list__group--photo .an-menu-list__text,
	.an-menu-list__group--photo-left .an-menu-list__text {
		grid-row: 2;
		grid-column: 1;
	}

	.an-menu-list__photo .an-figure__media {
		height: var(--an-photo-h-t, 360px);
	}
}

/* Phone (390). */
@media (max-width: 767px) {
	.an .an-menu-list__group-title {
		font-size: 32px;
	}

	.an .an-menu-list__name {
		font-size: 23px;
	}

	.an-menu-list__photo .an-figure__media {
		height: var(--an-photo-h-m, 240px);
	}

	.an-menu-list__button {
		width: 100%;
	}
}