/**
 * Nightlife, VIP package — one section of the design.
 *
 * A picture the band holds under its own light, the heading standing on it, and
 * the three panels set into the middle of it.
 */

.custom-nightlife-membership {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 80px;
	width: 100%;
	padding: 80px max( 0px, calc( ( 100% - 1440px ) / 2 ) ) 106px max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;
	overflow: hidden;

	background-image: radial-gradient(
		626px 937px at 50% 50%,
		#ebe4ca 0%,
		#f3eedc 100%
	);
}

.custom-nightlife-membership__picture,
.custom-nightlife-membership__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-nightlife-membership__picture {
	opacity: 0.81;
}

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

.custom-nightlife-membership__veil {
	background-color: rgba( 0, 0, 0, 0.33 );
}

.custom-nightlife-membership__heading {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
}

/* The three panels, dividing the row four to one to one. */
.custom-nightlife-membership__panels {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	aspect-ratio: 1440 / 600;
	overflow: hidden;
}

.custom-nightlife-membership__panel,
.custom-nightlife-membership__panel:hover,
.custom-nightlife-membership__panel:focus,
.custom-nightlife-membership__panel:active {
	color: inherit;
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.custom-nightlife-membership__panel--wide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	flex: 4 1 0;
	padding-bottom: 48px;
	box-sizing: border-box;
}

.custom-nightlife-membership__panel--side,
.custom-nightlife-membership__panel--side:hover,
.custom-nightlife-membership__panel--side:focus,
.custom-nightlife-membership__panel--side:active {
	display: block;
	flex: 1 1 0;
	text-decoration: none;
}

.custom-nightlife-membership__panel-picture {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-nightlife-membership__panel-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-nightlife-membership__panel-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-nightlife-membership__button,
.custom-nightlife-membership__button:hover,
.custom-nightlife-membership__button:focus,
.custom-nightlife-membership__button:active {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color 300ms ease-in-out,
		color 300ms ease-in-out,
		opacity 300ms ease-in-out;
}

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

/* Tablet and mobile — the file draws one of them (11174:10617), and draws
   it as a row of three that runs off the frame. As asked, the wide panel
   takes a row of its own, 16 in from either edge, at the shape the file
   gives it (297 by 217) with its button 16 above the foot, and the two
   beside it divide a row under it, touching, at the wide panel's shape —
   a decision, since the file's own shape for them (100 by 217) is a strip.
   The name stands 23 down the band with 24 above and below it, and 24 is
   left under the panels. Each picture stands in the flow at its shape, and
   the row takes its depth from them: a shape given to the panels is read by
   nothing above it once the row wraps. Tablet is not drawn and keeps the
   wide tier's row of three. */
@media ( max-width: 1024px ) {
	.custom-nightlife-membership {
		gap: 0;
		padding: 23px 16px 24px;
	}

	.custom-nightlife-membership__heading {
		padding: 24px 0;
	}

	.custom-nightlife-membership__button,
	.custom-nightlife-membership__button:hover,
	.custom-nightlife-membership__button:focus,
	.custom-nightlife-membership__button:active {
		padding: 6px 10px;
	}
}

@media ( max-width: 767px ) {
	.custom-nightlife-membership__panels {
		flex-wrap: wrap;
		gap: 0;
		aspect-ratio: auto;
	}

	.custom-nightlife-membership__panel--wide {
		flex: 0 0 100%;
		padding-bottom: 0;
	}

	.custom-nightlife-membership__panel--side,
	.custom-nightlife-membership__panel--side:hover,
	.custom-nightlife-membership__panel--side:focus,
	.custom-nightlife-membership__panel--side:active {
		flex: 1 1 40%;
	}

	.custom-nightlife-membership__panel-picture {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
		aspect-ratio: 297 / 217;
	}

	.custom-nightlife-membership__button,
	.custom-nightlife-membership__button:hover,
	.custom-nightlife-membership__button:focus,
	.custom-nightlife-membership__button:active {
		position: absolute;
		bottom: 16px;
	}
}