@media (max-width: 1400px) {
    .weather-data .current-weather {
      padding: 20px;
    }
    .weather-cards {
      flex-wrap: wrap;
    }
    .weather-cards .card {
      width: calc(100% / 4 - 15px);
    }
  }
  @media (max-width: 1200px) {
    .weather-cards .card {
      width: calc(100% / 3 - 15px);
    }
  }
  @media (max-width: 950px) {
    .weather-input {
      width: 450px;
    }
    .weather-cards .card {
      width: calc(100% / 2 - 10px);
    }
  }
  @media (max-width: 750px) {
    h1 {
      font-size: 1.45rem;
      padding: 16px 0;
    }
    .container {
      flex-wrap: wrap;
      padding: 15px;
    }
    .weather-input {
      width: 100%;
    }
    .weather-data h2 {
      font-size: 1.35rem;
    }
  }