@media (max-width: 1200px){
      .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
      .toolbar{grid-template-columns:1fr 1fr 1fr 1fr}
    }
    @media (max-width: 820px){
      .daterange-calendars{flex-direction:column;gap:16px}
      .daterange-popover{right:auto;left:0}
    }
    @media (max-width: 720px){
      .wrap{padding:18px}
      .title h1{font-size:28px}
      .grid-cards{grid-template-columns:1fr}
      .toolbar{grid-template-columns:1fr}
      .metric-value{font-size:38px}
      .daterange-input{min-width:0;width:100%}
      .daterange{width:100%}
      .city-filter{min-width:0;width:100%}
    }