.winter-pause {
  color: #fff7e7;
  background: #203b30;
  border-block: 1px solid #416252;
}
.winter-pause[hidden],
.winter-pause__timer[hidden] {
  display: none;
}
.winter-pause__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 410px);
  align-items: center;
  gap: 18px 34px;
  padding-block: 24px;
}
.winter-pause__title {
  display: flex;
  align-items: baseline;
  gap: .32em;
  font: 700 clamp(1.85rem, 4vw, 2.8rem)/1.08 var(--serif);
  text-wrap: balance;
}
.winter-pause__flake {
  color: #f3d08e;
  font: .77em/1 var(--sans);
}
.winter-pause__date {
  margin-top: 8px;
  color: #fae2b4;
  font-size: clamp(.95rem, 2.4vw, 1.12rem);
}
.winter-pause__timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 1vw, 10px);
}
.winter-pause__unit {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 75px;
  padding: 8px 1px;
  text-align: center;
  background: #2d4b3d;
  border: 1px solid #587562;
  border-radius: 10px;
}
.winter-pause__number {
  color: #fff7e7;
  font: 700 clamp(1.55rem, 4.4vw, 2.25rem)/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
.winter-pause__label {
  color: #fae2b4;
  font-size: clamp(.67rem, 1.4vw, .82rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
@media (max-width: 740px) {
  .winter-pause__layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 13px;
    padding-block: 17px;
    text-align: center;
  }
  .winter-pause__title {
    justify-content: center;
  }
  .winter-pause__timer {
    width: min(100%, 400px);
  }
  .winter-pause__unit {
    min-height: 55px;
  }
}