/* ==========================================================================
   Breakfast — two food photos, the steam sketch and what every stay includes.
   ========================================================================== */

.mro-breakfast {
	position: relative;
	background: var(--wp--preset--color--mint-faint);
	padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--110);
}

.mro-breakfast__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--90);
	align-items: center;
	max-width: var(--wp--custom--container--wide);
	margin-inline: auto;
	padding-right: var(--wp--custom--gutter);
}

.mro-breakfast__media {
	position: relative;
}

/* breaks out past the left edge of the page */
.mro-breakfast__main {
	width: 88%;
	margin-left: -6%;
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--blob--a);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--lift);
}

.mro-breakfast__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mro-breakfast__tea {
	position: absolute;
	right: 0;
	bottom: -8%;
	width: 38%;
	aspect-ratio: 3 / 4;
	border: 8px solid var(--wp--preset--color--mint-faint);
	border-radius: var(--wp--custom--radius--arch);
	overflow: hidden;
	box-shadow: var(--wp--preset--shadow--soft);
}

.mro-breakfast__tea img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mro-breakfast__steam {
	position: absolute;
	right: 12%;
	bottom: 70%;
	width: 3.5rem;
	animation: mro-sway 6s var(--wp--custom--ease--sway) infinite alternate;
	transform-origin: bottom center;
}

.mro-breakfast__copy {
	max-width: 36rem;
}

.mro-breakfast__lead {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--md);
}

.mro-included {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
}

.mro-included__group--free {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--note);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	transform: rotate(-0.6deg);
}

.mro-included__title {
	margin-bottom: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	line-height: var(--wp--custom--leading--body);
	text-transform: lowercase;
	letter-spacing: var(--wp--custom--tracking--display);
}

.mro-included__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.mro-included__list .mro-chip-icon .mro-icon {
	color: var(--wp--preset--color--accent-strong);
}

.mro-included__list li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	line-height: var(--wp--custom--leading--snug);
}

@media (max-width: 1024px) {
	.mro-breakfast__grid {
		gap: var(--wp--preset--spacing--70);
	}
}

@media (max-width: 860px) {
	.mro-breakfast__grid {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--wp--custom--gutter);
	}

	.mro-breakfast__main {
		width: 82%;
		margin-left: 0;
	}

	.mro-breakfast__copy {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.mro-included__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.mro-included__group--free {
		padding: var(--wp--preset--spacing--50);
	}
}