/**
 * Clock CSS - Date et Heure
 */

.row-date-time {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--gap);
  align-items: stretch;
}

.date-box, .time-box {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date .weekday {
  font-size: var(--fs-md);
  color: var(--muted);
  letter-spacing: .02em;
}

.date .full-date {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.time {
  display: flex;
  align-items: baseline;
  gap: .25em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.time .hhmm {
  font-size: clamp(48px, 10vw, 120px);
  font-weight: 800;
  letter-spacing: .02em;
}

.time .sec {
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--muted);
  transform: translateY(8%);
}