/* --- Core layers (unchanged) --- */
.timer-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.timer‐wrap .timer‐number {
    font‐size: clamp(30px, 5vw, 110px);
}

.timer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.timer-bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.timer-content {
    position: absolute;
    inset: 0;
    z-index: 4;
}
.timer-left-panel {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 3;
}

.timer-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* exactly what you asked for */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.timer‐content .flex‐items {
    display: flex;
    /* assume row direction for numbers: days / hours / minutes / seconds */
    flex‐direction: row;
}

.timer‐content .flex‐items > div {
    flex: 1 1 0; /* flex‐grow:1; flex‐shrink:1; flex‐basis:0; */
}
/* Timer pill color: brand green on small, red on large */
.timer-pill {
    background: var(--c-primary, #007a3d);
}
@media (min-width: 1024px) {
    .timer-pill {
        background: #bd280d;
    }
}

/* Dot separators between numbers (scale up by breakpoint) */
.timer-dot {
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: #fff;
    display: block;
}
@media (min-width: 768px) {
    .timer-dot {
        width: 12px;
        height: 12px;
    }
}
@media (min-width: 1024px) {
    .timer-dot {
        width: 16px;
        height: 16px;
    }
}