/**
 * Private events, introduction — one section of the design.
 *
 * The words on the left and the picture on the right, with the soft shape the
 * file lays behind them. The band is as tall as the taller of the two columns
 * and the space above and below them make it.
 */

.custom-private-introduce {
	position: relative;
	display: flex;
	align-items: stretch;
	/* The file draws 640, 64 and 640 across a band of 1344. Held as the share
	   each takes, the two keep the file's figures where the band is at its full
	   width and their proportion where it is narrower. */
	gap: 4.762%;
	width: 100%;
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
	overflow: hidden;

	background-image: linear-gradient(
		133.489deg,
		#d8d0c2 34.484%,
		#685840 100%
	);
}

/* The shape the file lays behind the words, at the strength it gives it. */
.custom-private-introduce__shape {
	position: absolute;
	top: 61px;
	left: 0;
	width: 395px;
	height: 376px;
	opacity: 0.054;
	background-image: url( "../img/soft-shape.webp" );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.custom-private-introduce__words {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 48px;
	flex: 0 0 47.619%;
	width: auto;
}

.custom-private-introduce__body {
	width: 100%;
	margin: 0;
	text-align: center;
}

.custom-private-introduce__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 24px;
	border: 1px solid currentColor;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-private-introduce__button:hover {
	opacity: 0.75;
}

.custom-private-introduce__button svg {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.custom-private-introduce__picture {
	position: relative;
	flex: 0 0 47.619%;
	width: auto;
	height: 491px;
	border-radius: 24px;
	overflow: hidden;
}

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

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

/* Tablet and mobile — the file draws one of them (11174:11964): the words,
   the way in and the picture one under another, 16 in from either edge.
   Tablet is not drawn and takes the same figures. */
@media ( max-width: 1024px ) {
	.custom-private-introduce {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		padding: 38px 16px 77px;
	}

	.custom-private-introduce__shape {
		top: 78px;
		left: 52px;
		width: 244px;
		height: 240px;
	}

	.custom-private-introduce__words {
		flex: 0 0 auto;
		gap: 24px;
		width: 100%;
	}

	.custom-private-introduce__button {
		gap: 2px;
		padding: 6px 13px;
		border-radius: 13px;
	}

	.custom-private-introduce__button svg {
		width: 13px;
		height: 13px;
	}

	.custom-private-introduce__picture {
		flex: 0 0 auto;
		width: 100%;
		height: 268px;
		border-radius: 13px;
	}
}

/* Tablet — not drawn. The picture is given more depth than the phone keeps
   for it, short of the wide tier's. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-private-introduce__picture {
		height: 400px;
	}
}