*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: unset;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html, body {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    min-height: 600px;
    background:  radial-gradient(circle, rgba(0,0,0,0.6), black);
    height: 100%;
    perspective: 2000px;
    display: grid;
    overflow: hidden;
    place-items: center;
}

.wrap .base {
	width:  100%;
	height: 100%;
	transform-style: preserve-3d;
	display: grid;
	place-items:  center;
}

.wrap .base .card-clock-container {
	position: relative;
	transform-style: preserve-3d;
	width: 520px;
	height: 100px;
	/*background-color: rgba(0,0,0,0.2);*/
	/*box-shadow: 0 0 0 3px rgba(255,255,255,0.3);*/
	display: flex;
	z-index: 0;
	transform:  rotateY(0deg) rotateX(0deg);
	margin-left:  -10px;
}

.wrap .base .card-clock-container .card {
	position: relative;
	transform-style: preserve-3d;
	width: calc((520px - 110px) / 7);
	height: 50%;
	top:  0;
	/*left:  calc((((400px - 40px) / 6) * (var(--i) - 1)) + ((40px / 7) * var(--i)));*/
	left:  calc((70px / 10) * var(--i));
	/*box-shadow: 0 0 0 2px rgba(0,0,0,0.2) inset;*/
}

.wrap .base .card-clock-container .card div {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,1);
	display: grid;
	place-items:  center;
	transform-style: preserve-3d;
	z-index: 0;
	top: 10px;
	left: 0;
	box-shadow: 0 0 5px 2px rgba(0,0,0,0.3) inset;
	font-size: 40px;
	line-height: 0;
	font-weight: 600;
	border-radius: 0 0 5px 5px;
	/*transform:  translateZ(-1px);*/
}

.wrap .base .card-clock-container .card .front {
	transform-origin: center 0px;
	transition:  800ms ease-in-out;
	/*animation:  rotate-flip-board 10s ease-in-out infinite;*/
}

.wrap .base .card-clock-container .card:last-child {
	margin-left:  20px;
}

.wrap .base .card-clock-container .card:last-child div {
	font-size: 30px;
}

.wrap .base .card-clock-container .divider {
	width:  20px;
	height: 50%;
	position: relative;
	left: calc((70px / 10) * var(--i));
	top:  10px;
	transform-style: preserve-3d;
}

.wrap .base .card-clock-container .divider::before,
.wrap .base .card-clock-container .divider::after {
	position: absolute;
	width: 16px;
	content: '';
	height: 16px;
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 0 5px 2px rgba(0,0,0,0.3) inset;
	top:  3px;
	left:  calc(50% - 8px);
}

.wrap .base .card-clock-container .divider::after {
    bottom:  3px;
    top:  unset;
}

.flip {
	animation: rotate-flip-board .8s linear forwards;
}

.flip-reverse {
	animation: rotate-flip-board .8s linear reverse forwards;
}


@keyframes rotate-flip-board {
	0% {
		transform: rotateX(0deg);
	}
	25% {
		z-index: 2; 
	}
	50%, 100% {
		transform: rotateX(-360deg);
		z-index: 2; 
	}
}