@keyframes countdown-tick {
	0% {
		opacity: 1;
	}
	49% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.countdown {
	--height: 60px;
	font-size: 32px;

	.countdown__wrapper {
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
	}

	.countdown-number {
		background-color: var(--color-brand-text-bg);
		color: var(--color-brand-text-fg);

		display: inline-flex;
		flex-flow: column;
		height: var(--height);
		padding: 8px 16px;
		margin: 4px;
		text-align: center;

		.countdown-number__unit {
			font-size: 16px;
		}
	}

	.separator {
		display: flex;
		height: var(--height);
		align-items: center;
		color: var(--color-brand-text-fg);
	}

	.separator--seconds {
		animation: countdown-tick linear infinite 2s;
	}

	@container (max-width: 400px) {
		.separator--seconds,
		[data-unit="second"] {
			display: none;
		}
	}
}