.hero {
	display: flex;
	position: relative;
	align-items: center;
	padding: 1rem 0;
	height: 100svh;
	max-height: 9rem;
	overflow: hidden;

	/*  */
}
		
.hero .media-frame {
		transition: transform 1000ms cubic-bezier(0.86, 0.06, 0.36, 1);
		transform: translateY(20%) scale(1.2);
	}
		
:is(.hero .media-frame) .frame {
			overflow: hidden;
		}
		
:is(.hero .media-frame)::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(180deg, rgba(21, 39, 23, 0.6) 0%, rgba(21, 39, 23, 0.8) 100%);
		}

/*  */
		
.hero .cnt {
		max-width: 7.3rem;
		margin: auto;
	}
		
.hero .title {
		text-align: center;
	}
		
:is(.hero .title) span {
			color: var(--color-gold);
		}
		
.hero .pagination {
		position: absolute;
		transition: opacity 512ms cubic-bezier(0.86, 0.06, 0.36, 1);
		bottom: -1.8rem;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0;
	}
		
:is(.hero .pagination) .dots {
			display: flex;
			gap: 0.13rem;
			align-items: center;
			justify-content: center;
			margin-bottom: 0.32rem;
		}
		
:is(.hero .pagination) .dots > div {
			transition: background-color var(--dur-medium) var(--ease);
			width: 0.32rem;
			height: 0.01rem;
			background-color: var(--color-grey);
			border-radius: 0.03rem;
		}
		
.active:is(:is(.hero .pagination) .dots > div) {
				background-color: var(--color-gold);
			}
		
:is(.hero .pagination) .text {
			text-transform: uppercase;
			text-align: center;
			color: var(--color-gold);
		}
		
.hero.revealed .media-frame {
			transform: translateY(0) scale(1);
			transition-delay: 100ms;
		}
		
.hero.revealed .section-button {
			transform: translateY(0);
			opacity: 1;
			transition-delay: 300ms;
		}
		
.hero.revealed .pagination {
			opacity: 1;
			transition-delay: 300ms;
		}
		
@media screen and (max-width: 768px) and (orientation: portrait) {
		
	.hero {
		padding: 0.8rem 0;
		max-height: 5rem;
}
		
		.hero .pagination {
			width: max-content;
		}
	}