@media (max-width: 580px) {
    .weather-card {
      max-width: 210px;
      padding: 25px;
      font-size: 14px;
    }
  
    .weather-card img {
      width: 70px;
      height: 70px;
    }
  
    input, button {
      width: 100%;
      font-size: 14px;
    }
  }
  
  @media (max-width: 780px) {
    .weather-card {
      max-width: 330px;
      padding: 18px;
      font-size: 15px;
    }
  
    .weather-card img {
      width: 80px;
      height: 80px;
    }
  
    input, button {
      font-size: 15px;
    }
  }