html {
	--on: red;
	--off: black;
	--bg: hsl(0 0 6);
	--w: 12vw;
}
body {
	display: grid;
	height: 100dvh;
	margin: 0 calc(var(--w) / 5);;
	align-items: end;
	background: var(--bg);
}

time {
	box-sizing: border-box;
	display: flex;
	background: var(--bg);
	gap: calc(var(--w) / 5);
	padding: calc(var(--w) / 5);
	justify-content: center;
}
time > span {
	transform: skewX(-3deg);
}
span {
	display: grid;
	gap: calc(var(--w) / 50);
	width: var(--w);
	height: calc( var(--w) * 1.8);
	background: var(--bg);
	position: relative;
	grid-template-columns: 1fr 3fr 1fr;
	grid-template-rows: 1fr 3fr 1fr 3fr 1fr;
}
.dots {
	width: calc(var(--w) / 6);
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.dots span {
	background: var(--off);
	width: calc( var(--w) * .136 );
	aspect-ratio: 1;
	rotate: 45deg;
	transition: .2s;
}
.dots span::before,
.dots span::after {
	content: none;
}

span span {
	background: var(--off);
	width: auto;
	height: auto;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr;
}
span span:nth-of-type(1),
span span:nth-of-type(4),
span span:nth-of-type(7) {
	grid-column-start: 2;
	align-items: center;
}
span span:nth-of-type(2),
span span:nth-of-type(5) {
	grid-column-start: 1;
	justify-items: center;
	display: grid;
}
span span:nth-of-type(3),
span span:nth-of-type(6) {
	grid-column-start: 3;
	justify-items: center;
}

span span::before,
span span::after {
	content: '';
	position: absolute;
	width: calc( var(--w) * .136 );
	aspect-ratio: 1;
	rotate: 45deg;
	background: var(--off);
}
span span::after {
	
}
span span:nth-of-type(1)::before,
span span:nth-of-type(4)::before,
span span:nth-of-type(7)::before {
	translate: calc( var(--w) * .136 * -.5) 0;
}
span span:nth-of-type(1)::after,
span span:nth-of-type(4)::after,
span span:nth-of-type(7)::after {
	translate: calc( var(--w) * .136 * .5) 0;
	right: 0;
}

span span:nth-of-type(2)::before,
span span:nth-of-type(3)::before,
span span:nth-of-type(5)::before,
span span:nth-of-type(6)::before {
	translate: 0 calc( var(--w) * .136 * -.5);
}
span span:nth-of-type(2)::after,
span span:nth-of-type(3)::after,
span span:nth-of-type(5)::after,
span span:nth-of-type(6)::after {
	translate: 0 calc( var(--w) * .136 * .5);
	bottom: 0;
}

.num1 span:nth-of-type(3),
.num1 span:nth-of-type(6),

.num2 span:nth-of-type(1),
.num2 span:nth-of-type(3),
.num2 span:nth-of-type(4),
.num2 span:nth-of-type(5),
.num2 span:nth-of-type(7),

.num3 span:nth-of-type(1),
.num3 span:nth-of-type(3),
.num3 span:nth-of-type(4),
.num3 span:nth-of-type(6),
.num3 span:nth-of-type(7),

.num4 span:nth-of-type(2),
.num4 span:nth-of-type(3),
.num4 span:nth-of-type(4),
.num4 span:nth-of-type(6),

.num5 span:nth-of-type(1),
.num5 span:nth-of-type(2),
.num5 span:nth-of-type(4),
.num5 span:nth-of-type(6),
.num5 span:nth-of-type(7),

.num6 span:nth-of-type(1),
.num6 span:nth-of-type(2),
.num6 span:nth-of-type(4),
.num6 span:nth-of-type(5),
.num6 span:nth-of-type(6),
.num6 span:nth-of-type(7),

.num7 span:nth-of-type(1),
.num7 span:nth-of-type(3),
.num7 span:nth-of-type(6),

.num8 span,

.num9 span:nth-of-type(1),
.num9 span:nth-of-type(2),
.num9 span:nth-of-type(3),
.num9 span:nth-of-type(4),
.num9 span:nth-of-type(6),
.num9 span:nth-of-type(7),

.num0 span:nth-of-type(1),
.num0 span:nth-of-type(2),
.num0 span:nth-of-type(3),
.num0 span:nth-of-type(5),
.num0 span:nth-of-type(6),
.num0 span:nth-of-type(7),

.dots.on span{
	--off: var(--on);
}