@import url('/assets/css/main.css');

.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.2rem}
.city-card{
  background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.25rem;transition:border .18s;
}
.city-card:hover{border-color:rgba(34,211,238,.35)}
.city-card.night{border-color:rgba(167,139,250,.35)}
.city-name{font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.5rem}
.city-tz{font-size:.78rem;color:var(--muted-2)}
.city-time{font-size:1.65rem;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;margin-top:.2rem}
.city-date{font-size:.85rem;color:var(--muted)}
.day-night{font-size:.78rem;color:var(--muted-2)}