/* ==========================================================================
   CONTAGEM REGRESSIVA DA ABERTURA (hero da pagina inicial)
   Substitui o texto "Batalhas emocionantes..." e o bloco de servidor que
   ficava abaixo do hero. Cores e fontes do site.
   ========================================================================== */
.hero-cd {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-top: .75rem;
}
.hero-cd__label {
	color: #c1b9af;
	font-family: var(--font-0);
	font-size: .875rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.hero-cd__grid {
	align-items: flex-start;
	display: flex;
	gap: .5rem;
}
.hero-cd__item {
	align-items: center;
	background: linear-gradient(180deg, rgba(40, 37, 36, .92), rgba(18, 16, 15, .92));
	border: 1px solid rgba(216, 174, 96, .45);
	border-radius: .5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 218, 132, .12);
	display: flex;
	flex-direction: column;
	min-width: 5.25rem;
	padding: .625rem .5rem .5rem;
}
.hero-cd__num {
	color: #ffda84;
	font-family: var(--font-1);
	font-size: 2.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 0 18px rgba(255, 183, 81, .35);
}
.hero-cd__unit {
	color: #8a8178;
	font-family: var(--font-0);
	font-size: .6875rem;
	letter-spacing: .1em;
	margin-top: .375rem;
	text-transform: uppercase;
}
.hero-cd__sep {
	color: rgba(216, 174, 96, .6);
	font-family: var(--font-1);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	padding-top: .875rem;
}
.hero-cd__done {
	color: #7dbb3c;
	font-family: var(--font-1);
	font-size: 1.75rem;
	font-weight: 700;
	margin-top: .75rem;
	text-transform: uppercase;
}

@media (max-width: 559.98px) {
	.hero-cd__grid {
		gap: .3125rem;
	}
	.hero-cd__item {
		min-width: 3.875rem;
		padding: .5rem .25rem .375rem;
	}
	.hero-cd__num {
		font-size: 1.75rem;
	}
	.hero-cd__unit {
		font-size: .5625rem;
	}
	.hero-cd__sep {
		font-size: 1.375rem;
		padding-top: .625rem;
	}
}