.countdown {
    display: flex;
    align-items: baseline
}

.countdown__timer {
    display: inline-block
}

.countdown__item {
    display: inline-block
}

.countdown__item:nth-of-type(2)::after,
.countdown__item:nth-of-type(3)::after {
    content: ":"
}

.countdown__value {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius-sm);
    background: linear-gradient(132deg, var(--color-accent-lighter), var(--color-accent-dark)) border-box;
    color: var(--color-white);
    width: 1.6em;
    height: 1.6em;
    margin-bottom: var(--space-xxxs);
    justify-content: center;
    align-items: center;
    display: flex;
}

.countdown--has-labels .countdown__item {
    margin-right: var(--space-xs)
}

.countdown--has-labels .countdown__item:last-child {
    margin-right: 0
}

.countdown--has-labels .countdown__item::after {
    content: ""
}

.countdown--has-labels .countdown__label {
    font-size: .45em
}

.countdown--grid .countdown__timer {
    --timer-gap: var(--space-xxxs);
    display: flex;
    margin-left: calc(-1 * var(--timer-gap))
}

.countdown--grid .countdown__item {
    width: 1.6em;
    text-align: center;
    padding: var(--space-xxxxs) 0;
    margin-left: var(--timer-gap)
}

.countdown--grid .countdown__item::after {
    content: ""
}

.countdown--grid .countdown__label {
    display: block;
    text-transform: uppercase;
    font-size: .4em;
    letter-spacing: .1em;
    color: var(--color-contrast-medium)
}

.countdown__fallback {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%)
}