/**
 * Hero style: Full Screen
 *
 * A photograph or a muted background video at viewport height, the statement centered over it.
 */

.module.hero.style-full-screen {
	align-content: center;
	display: grid;
	isolation: isolate;
	min-height: max(560px, 100svh);
	overflow-x: clip;
	position: relative;
}

.module.hero.style-full-screen .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
	z-index: -2;
}

.module.hero.style-full-screen .media img,
.module.hero.style-full-screen .media video {
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * 64px), 0) scale(1.16);
}

.module.hero.style-full-screen::before {
	background: linear-gradient(180deg, var(--overlay-scrim-soft) 0%, transparent 100%);
	content: '';
	height: 200px;
	inset: 0 0 auto;
	position: absolute;
	z-index: -1;
}

.module.hero.style-full-screen::after {
	background: var(--overlay-scrim-copy);
	content: '';
	inset: 0;
	position: absolute;
	z-index: -1;
}

.module.hero.style-full-screen :is(h1, h2, h3, h4, h5, h6) {
	color: var(--white);
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
}

.module.hero.style-full-screen .pause {
	bottom: var(--text-spacing-small);
	position: absolute;
	right: var(--text-spacing-small);
	z-index: 1;
}

.module.hero.style-full-screen .pause .icon-play,
.module.hero.style-full-screen .pause[aria-pressed="true"] .icon-pause {
	display: none;
}

.module.hero.style-full-screen .pause[aria-pressed="true"] .icon-play {
	display: block;
}