/**
 * The Space, content — one section of the design.
 *
 * The pictures on the gradient the file gives them. Positions in the file
 * become a layout here, not offsets.
 */

.custom-space-content__gallery {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 68px 56px 76px 56px;
	box-sizing: border-box;
	overflow: hidden;

	/* The band's own gradient, read from the file. */
	background-image: radial-gradient(
		1464px 1250px at 50% -22px,
		#faf6ea 0%,
		#cac1b5 25%,
		#9a8c7f 50%,
		#827164 62.5%,
		#6a564a 75%,
		#523c2f 87.5%,
		#3a2114 100%
	);
}

/* The design's own mark, carried by the build rather than uploaded. It hangs
   off the band's left edge, as the file draws it. */
.custom-space-content__gallery::before {
	content: "";
	position: absolute;
	top: 212px;
	left: -80px;
	width: 318px;
	height: 302px;
	background-image: url( "../img/the-space-content-mark.webp" );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	pointer-events: none;
}

.custom-space-content__grid {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	max-width: 1328px;
}

.custom-space-content__row {
	display: flex;
	align-items: center;
	gap: 48px;
	width: 100%;
}

/* Every picture keeps its box whether or not one has been uploaded. */
.custom-space-content__slot {
	position: relative;
	display: block;
	border-radius: 24px;
	overflow: hidden;
}

.custom-space-content__slot--wide {
	flex: 1 0 0;
	min-width: 0;
	height: 476px;
}

.custom-space-content__slot--tall {
	flex: 0 0 auto;
	width: 400px;
	height: 476px;
}

.custom-space-content__slot--full {
	width: 100%;
	height: 560px;
}

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

/* Tablet and mobile — the file draws one of them (11167:8224): the two
   pictures on one row, the third under them, each 150 deep in a band padded
   16 at either side. The file runs the row 27 past the right edge; the
   client has said that is the file's slip, so the row is held inside the
   band's padding and the two keep the file's proportion (267 : 126) of it.
   Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-space-content__gallery {
		padding: 38px 16px;
	}

	.custom-space-content__grid {
		gap: 24px;
		max-width: none;
	}

	.custom-space-content__row {
		gap: 8px;
	}

	.custom-space-content__slot {
		border-radius: 8px;
	}

	.custom-space-content__slot--wide {
		height: 150px;
	}

	.custom-space-content__slot--tall {
		flex: 0 0 31.4%;
		width: auto;
		height: 150px;
	}

	.custom-space-content__slot--full {
		height: 150px;
	}
}

/* Tablet — not drawn. The pictures are given a good deal more depth than the
   narrow tier keeps for them, and still well short of the wide tier's. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-space-content__slot--wide,
	.custom-space-content__slot--tall {
		height: 300px;
	}

	.custom-space-content__slot--full {
		height: 360px;
	}
}