/* se-photo-band */

.se-band {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.se-band--band  { min-height: min(46svh, 24rem); }
.se-band--short { min-height: min(64svh, 36rem); }
.se-band--tall  { min-height: min(88svh, 52rem); }

.se-band--middle { justify-content: center; }

.se-band__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--se-cocoa);
}

.se-band__shot {
	position: absolute;
	inset: -6%;
	will-change: transform;
}

.se-band__shot .se-media { position: absolute; inset: 0; }

.se-band__body {
	position: relative;
	width: 100%;
	padding-block: clamp(2rem, 3.65vw, 4.375rem);
}

.se-band__text {
	color: var(--se-bone);
	max-width: 26ch;
}

.se-band__caption {
	position: relative;
	width: 100%;
	padding-block: 0 clamp(1.25rem, 2.08vw, 2.5rem);
	color: rgba(243, 238, 229, 0.55);
}

/* Figma sets the mono line above the giant line on the closing tickets band. */
.se-band__caption--above {
	padding-block: 0;
}

.se-band__caption--above + .se-band__body {
	padding-block-start: clamp(0.75rem, 1.15vw, 1.375rem);
}

@media (max-width: 767px) {
	.se-band--band  { min-height: min(34svh, 17rem); }
	.se-band--short { min-height: min(52svh, 28rem); }
	.se-band--tall  { min-height: min(68svh, 38rem); }
	.se-band__text { max-width: none; }
}