.wd-timer {
    display: inline-flex;
    gap: 5px;
    flex-wrap: wrap;
    --wd-timer-size: 20px
}

    .wd-timer > span {
        display: inline-flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 5px;
        min-width: 2.3em;
        min-height: 2.3em;
        border-radius: var(--wd-brd-radius);
        font-size: var(--wd-timer-size);
        line-height: 1;
        border-style: solid;
        border-width: 2px;
    }

    .wd-timer .wd-timer-value {
        color: var(--color-gray-800);
        font-weight: 600
    }

    .wd-timer .wd-timer-text {
        text-transform: capitalize;
        font-size: 60%
    }

.wd-countdown-timer {
    direction: ltr
}

.wd-single-countdown .wd-el-title {
    margin-bottom: 10px;
    font-size: 18px;
    justify-content: var(--text-align)
}

.timer-style-standard > span {
    background-color: var(--bgcolor-white);
    box-shadow: 0 0 3px rgba(0,0,0,0.1)
}

.timer-style-transparent > span {
    background-color: rgba(var(--bgcolor-white-rgb), 0.2)
}

.timer-style-active > span {
    background-color: var(--wd-primary-color)
}

@media (min-width: 1025px) {
    .timer-size-medium {
        --wd-timer-size: 24px
    }

    .timer-size-large {
        --wd-timer-size: 28px
    }

    .timer-size-xlarge {
        --wd-timer-size: 42px
    }

        .timer-size-xlarge .wd-timer-text {
            font-size: 16px
        }
}