/* banquet-layouts: 会場レイアウトの実例 */

.banquet-layouts {
	padding-block: var(--space-7) var(--space-6);
}

.banquet-layouts__title {
	color: var(--color-text);
	font-size: var(--fs-h2-mobile);
	font-weight: var(--fw-normal);
	line-height: var(--lh-tight);
	letter-spacing: 0.1em;
	text-align: center;
}

.banquet-layouts__title::after {
	display: block;
	width: var(--space-9);
	margin: var(--space-3) auto 0;
	border-top: 1px solid var(--color-main);
	content: "";
}

.banquet-layouts__intro {
	max-width: 34em;
	margin: var(--space-5) auto 0;
	font-size: var(--fs-body-pc);
	line-height: var(--lh-body);
	letter-spacing: 0.04em;
	word-break: auto-phrase;
}

.banquet-layouts__gallery {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.banquet-layouts__figure {
	min-width: 0;
}

.banquet-layouts__figure img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.banquet-layouts__figure:nth-child(1) img {
	object-position: 50% 48%;
}

.banquet-layouts__figure:nth-child(3) img {
	object-position: 50% 58%;
}

.banquet-layouts__figure figcaption {
	margin-top: var(--space-2);
	color: var(--color-sub);
	font-size: var(--fs-body-pc);
	line-height: var(--lh-body);
	letter-spacing: 0.06em;
	text-align: center;
}

@media (min-width: 768px) {
	.banquet-layouts {
		padding-block: var(--space-10);
	}

	.banquet-layouts__title {
		font-size: var(--fs-h2);
	}

	.banquet-layouts__title::after {
		width: var(--space-10);
		margin-top: var(--space-5);
	}

	.banquet-layouts__intro {
		margin-top: var(--space-6);
		text-align: center;
	}

	.banquet-layouts__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
		margin-top: var(--space-8);
	}

	.banquet-layouts__figure img {
		aspect-ratio: 4 / 3;
	}
}