.universal-countdown {
  width: 100%;
}

.universal-countdown__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.universal-countdown__part {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: var(--countdown-item-min-width);
  padding: 10px;
  background: rgb(var(--countdown-item-background));
  border-radius: var(--countdown-item-radius);
}

.universal-countdown--unit-right .universal-countdown__part {
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
}

.universal-countdown__value {
  color: rgb(var(--countdown-number-color));
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.universal-countdown__unit {
  margin-block-start: 6px;
  color: rgb(var(--countdown-unit-color));
  line-height: 1.2;
}

.universal-countdown--unit-right .universal-countdown__unit {
  margin-block-start: 0;
}

.universal-countdown--unit-right .universal-countdown__separator {
  align-self: center;
  margin-block-start: 0;
}

.universal-countdown__separator {
  align-self: flex-start;
  margin-block-start: 10px;
  color: rgb(var(--countdown-separator-color));
  line-height: 1;
}

.universal-countdown__result {
  display: none;
  width: 100%;
  text-align: center;
}

.universal-countdown.is-ended .universal-countdown__timer {
  display: none;
}

.universal-countdown.is-ended .universal-countdown__result {
  display: block;
}

@media (max-width: 959px) {
  .universal-countdown__timer {
    gap: 4px;
  }

  .universal-countdown__part {
    min-width: min(var(--countdown-item-min-width), 22vw);
    padding: 8px 4px;
  }

  .universal-countdown__separator {
    margin-block-start: 8px;
  }
}