.countdown__container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.countdown__label {
    font: 400 14.52px/12px "Inter", serif;
    color: var(--text-gray-menu);
}
.countdown__label--dark-text {
    font: 400 14.52px/12px "Inter", serif;
    color: var(--dark-text);
}
.countdown {
    display: flex;
    gap: 8px;
    font: 600 26.63px/22px "Inter", serif;
}

.time-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.time-section > p {
    text-align: left;
    font: 400 14.52px/12px "Inter", serif;
    color: var(--text-gray-menu);
}

.time-group {
    display: flex;
    gap: 3px;
}

.time-segment {
    display: block;
    font-size: 22px;
    /*font-weight: 900;*/
    width: 35px;
}

.segment-display {
    position: relative;
    height: 100%;
}

.segment-display__top, .segment-display__bottom {
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 50%;
    position: relative;
}

.segment-display__top {
    /*background: #111;*/
    background: #DAE5F8;
    /*color: #eee;*/
    color: var(--dark-text);
    line-height: 52.26px;
    border: 1px solid #DEE7F6;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.segment-display__bottom {
    /*background: #333;*/
    background: #DEE7F6;
    /*color: #fff;*/
    color: var(--dark-text);
    line-height: 0;
    border: 1px solid #DEE7F6;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.segment-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    width: 35px;
    perspective: 400px;
}

.segment-overlay__top, .segment-overlay__bottom {
    position: absolute;
    overflow: hidden;
    text-align: center;
    width: 100%;
    height: 50%;
}

.segment-overlay__top {
    top: 0;
    line-height: 52.26px;
    /*color: #eee;*/
    color: var(--dark-text);
    /*background: #111;*/
    background: #DAE5F8;
    transform-origin: bottom;
    border: 1px solid #DEE7F6;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.segment-overlay__bottom {
    bottom: 0;
    line-height: 0;
    /*color: #fff;*/
    color: var(--dark-text);
    /*background: #333;*/
    background: #DEE7F6;
    /*border-top: 2px solid black;*/
    transform-origin: top;
    border: 1px solid #DEE7F6;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.segment-overlay.flip .segment-overlay__top {
    animation: flip-top 0.8s linear;
}

.segment-overlay.flip .segment-overlay__bottom {
    animation: flip-bottom 0.8s linear;
}

@keyframes flip-top {
    0% {
        transform: rotateX(0deg);
    }
    50%, 100% {
        transform: rotateX(-90deg);
    }
}
@keyframes flip-bottom {
    0%, 50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}