/**
 * Home, dining — one section of the design.
 *
 * The invitation, then five pictures in the arrangement the file draws. Every
 * measurement here was read from the design file.
 */

.custom-home-dining {
	--custom-home-dining-1: #29180e;
	--custom-home-dining-2: #3a2114;
	--custom-home-dining-3: #5c2f1a;
	--custom-home-dining-4: #7d3d20;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;

	/* The band's own gradient, read from the file. */
	background-image: radial-gradient(
		1353px 1165px at 648px 97px,
		var( --custom-home-dining-1 ) 22.112%,
		var( --custom-home-dining-2 ) 79.123%,
		var( --custom-home-dining-3 ) 88.957%,
		var( --custom-home-dining-4 ) 98.791%
	);
}

.custom-home-dining__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

.custom-home-dining__heading {
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

.custom-home-dining__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-home-dining__button:hover {
	opacity: 0.85;
}

/* Five pictures in three columns and three rows, as the file arranges them. */
.custom-home-dining__grid {
	display: grid;
	grid-template-columns: 462fr 421fr 421fr;
	grid-template-rows: 253px 147px 420px;
	gap: 20px;
	width: 100%;
	max-width: 1344px;
}

.custom-home-dining__slot {
	position: relative;
	display: block;
	min-width: 0;
	border-radius: 24px;
	overflow: hidden;
}

.custom-home-dining__slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-home-dining__slot--tall {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.custom-home-dining__slot--wide {
	grid-column: 2 / span 2;
	grid-row: 1;
}

.custom-home-dining__slot--left {
	grid-column: 1;
	grid-row: 3;
}

.custom-home-dining__slot--middle {
	grid-column: 2;
	grid-row: 2 / span 2;
}

.custom-home-dining__slot--right {
	grid-column: 3;
	grid-row: 2 / span 2;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-home-dining__button {
		transition: none;
	}
}

/* Tablet and mobile — the file lays the pictures one under another rather than
   in a figure of three columns. */
@media ( max-width: 1024px ) {
	.custom-home-dining {
		gap: 34px;
		padding: 38px 16px 44px;
	}

	.custom-home-dining__head {
		gap: 16px;
	}

	.custom-home-dining__button {
		padding: 8px 16px;
	}

	.custom-home-dining__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-rows: 300px;
		gap: 24px;
	}

	/* Each takes the row it falls in, in the order the section prints them. */
	.custom-home-dining__slot--tall,
	.custom-home-dining__slot--wide,
	.custom-home-dining__slot--left,
	.custom-home-dining__slot--middle,
	.custom-home-dining__slot--right {
		grid-column: auto;
		grid-row: auto;
	}
}