:root {
  --bg-dark: #D42631;
  --frame-bg: hsl(0, 0%, 0%);
  --frame-top: hsl(0, 0%, 10%);
  --frame-bottom: hsl(0, 0%, 10%);
  --counter-top: #fff;
  --counter-bottom: #fff;
  --label: #fff;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr;
  gap: 0px 8px;
  margin-top: -5px;
  width: 150px;
}

.countdown .frame {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: var(--frame-bg);
  /* box-shadow: 0 3px 0 0 hsl(0deg 0% 0%), 0 3px 0 0 var(--frame-bg); */
  font-size: 16px;
}

.countdown .frame::after {
  /* black line in the middle */
  content: "";
  position: absolute;
  top: 49%;
  transform: translateY(-50%);
  left: 5px;
  right: 5px;
  height: 0px;
  background-color: #191919;
  z-index: 99;
}

.countdown .frame,
.countdown .top,
.countdown .bottom {
  border-radius: 6px;
}

.countdown .top,
.countdown .bottom,
.countdown .wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.countdown .wrapper {
  transition: transform 0.1s;
  transform-style: preserve-3d;
}

.countdown .wrapper.flip {
  transform: rotateX(-90deg);
}

.countdown .top {
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  z-index: 2;
  background-color: var(--frame-top);
  color: var(--counter-top);
}

.countdown .top.drop {
  background-color: var(--frame-bg);
}

.countdown .dot {
  position: absolute;
  height: 10%;
  width: 10%;
  border-radius: 100vw;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
  background-color: var(--bg-dark);
  z-index: 1000;
  top: calc(50% - 5%);
  left: -5.1%;
}

.dot.right {
  transform: rotate(180deg);
  left: 95.9%;
}

.bottom {
  width: 100%;
  height: 100%;
  background-color: var(--frame-bottom);
  color: var(--counter-bottom);
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.countdown .bottom.darker {
  background-color: var(--frame-top);
}

.countdown .unit-label {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 6px;
  letter-spacing: 0.3em;
  color: var(--label);
}