/* 8.ro */
.cd-title { margin: 0; padding: 20px 18px 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
/* the days get the most room: a count of hundreds or thousands of days is
   wider than the hours, minutes and seconds; on a phone, a row of their own */
.cd-tiles { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 18px; }
@media (max-width: 559px) {
  .cd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-tile:first-child { grid-column: 1 / -1; }
}
.cd-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px;
  border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface-2);
}
.cd-tile b { width: 100%; text-align: center; white-space: nowrap; font-size: clamp(1.75rem, 7vw, 3rem); font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cd-tile small { font-size: .8125rem; color: var(--muted); }
.cd-state { margin: 0; padding: 0 18px; min-height: 1.5em; font-weight: 650; color: var(--accent-ink); }
.cd-past .cd-tile b { color: var(--muted); }
/* the moment's line wraps in two on a phone: both kept from the start */
@media (max-width: 559px) { .cd-when { min-height: calc(3em + 16px); } }
@media (min-width: 720px) {
  .cd-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
}