.clock-grid{--text-color:#f1f5f9;--accent-color:var(--goldcolor);--clock-border:var(--goldcolor);--hands-color:var(--goldcolor);display:grid;gap:0;grid-template-columns:repeat(auto-fit,100px);justify-content:center;max-width:370px;width:100%}.clock-card{align-items:center;background:transparent;display:flex;flex-direction:column;padding:10px;width:100px}.clock-face{background:transparent;border:1px solid var(--clock-border);border-radius:50%;height:80px;margin-bottom:.5rem;position:relative;width:80px}.clock-face:after{border-radius:50%;content:"";height:4px;top:50%;transform:translate(-50%,-50%);width:4px;z-index:10}.clock-face:after,.hand{background:var(--hands-color);left:50%;position:absolute}.hand{border-radius:4px;bottom:50%;transform-origin:bottom;z-index:5}.hour-hand{height:20px;margin-left:-1px;width:2px}.hour-hand,.minute-hand{transition:transform .5s cubic-bezier(.4,2.3,.3,1)}.minute-hand{height:30px;margin-left:-.75px;opacity:.8;width:1.5px}.second-hand{height:34px;margin-left:-.5px;transition:transform .2s cubic-bezier(.4,2.3,.3,1);width:1px}.city-name{color:var(--text-color);font-size:.7rem;font-weight:600;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%}