/**
 * Private events, virtual tour — one section of the design.
 *
 * What the client puts here is a film or a picture; the band holds it either
 * way, edge to edge, with the house wordmark beneath. A film plays itself: the
 * file draws a play mark to say the band is a film, not to ask for a press.
 */

.custom-private-tour {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-top: 96px;
	box-sizing: border-box;

	background-image: linear-gradient( 180deg, #29180e 22.134%, #e8e4db 100% );
}

.custom-private-tour__stage {
	position: relative;
	width: 100%;
	height: 720px;
	box-sizing: border-box;
	overflow: hidden;
}

.custom-private-tour__media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

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

/* The wordmark the section ends on: the design's, not the client's. It runs
   wider than the band, as the file draws it. */
.custom-private-tour__wordmark {
	display: block;
	/* 1516 across a band of 1440, held as that share so it comes down with
	   the band. */
	width: 105.278%;
	max-width: none;
	aspect-ratio: 1516 / 315;
	background-image: url( "../img/cavo-wordmark.webp" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Tablet and mobile — the file draws one of them (11174:12011): the band 49
   above the film, the film the width of the screen and 195 deep, the wordmark
   the width of the screen 16 beneath it. Tablet is not drawn and takes the
   same figures, the film deeper. */
@media ( max-width: 1024px ) {
	.custom-private-tour {
		gap: 16px;
		padding-top: 49px;
	}

	.custom-private-tour__stage {
		height: 195px;
	}

	.custom-private-tour__wordmark {
		width: 100%;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-private-tour__stage {
		height: 400px;
	}
}