*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#4d5055;font-family:Arial,Helvetica,sans-serif}
body{display:grid;place-items:center}
.artwork{position:relative;width:min(100vw,calc(100vh * 1.5));line-height:0;overflow:hidden;background:#fff;box-shadow:0 20px 60px #0005}
.artwork>img{display:block;width:100%;height:auto}
.countdown{
  position:absolute;
  left:6.4%;
  top:73.9%;
  width:35.7%;
  height:5.2%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2.2%;
  padding:0 1.1%;
  line-height:1;
  border-radius:6px;
  background:#fff;
  box-shadow:0 2px 12px #071b3824;
  border:1px solid #d9e7f7;
  color:#061f43;
  z-index:3;
}
.countdown div{display:flex;align-items:baseline;gap:.38em;white-space:nowrap}
.countdown strong{font-size:clamp(10px,1.55vw,25px);font-variant-numeric:tabular-nums;font-weight:800}
.countdown span{font-size:clamp(4px,.58vw,10px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#087be4}
.countdown i{width:1px;height:48%;background:#cbd8e8}
@media(max-aspect-ratio:3/2){
 body{align-items:start}
 .artwork{width:100vw;margin-top:max(0px,calc((100vh - 66.6667vw)/2))}
}
@media(prefers-reduced-motion:no-preference){
 .countdown strong{transition:opacity .15s ease}
}