@media (max-width: 700px) {
  input[type='search'] {
    width: 150px;
    padding-left: 10px;
    border-left: solid 1px rgba(255, 255, 255, 0.15);
  }
  /*  */
  .homepage table {
    width: 100%;
  }
  .homepage table tr td {
    display: flex;
    flex-flow: column;
  }
  .homepage .summary-left {
    display: none;
  }
  .homepage .summary-right {
    height: 48px;
    line-height: 48px;
  }
  /*  */
  .icon-search {
    display: none;
  }
  .summary-city {
    font-size: 120%;
  }
  .summary-temp {
    font-size: 300%;
  }
  .summary-deg {
    font-size: 250%;
  }
  .page-title {
    padding: 10px;
    width: calc(100% - 20px);
  }
  .search .search-button {
    width: 42px;
  }
  .navigation .navigation-item {
    width: 38px;
  }
  .forecast, .hourly-items {
    justify-content: flex-start;
  }
  /*  */
  .homepage:not(.expand) .summary {
    padding: 24px;
  }
  .homepage.expand table {
    background-color: rgba(0,0,0,0.1);
  }
  .homepage.expand .summary {
    border-left: 0;
    border-right: 0;
  }
  .homepage.expand .summary-right {
    border-top: solid 1px rgba(255, 255, 255, 0.05);
  }
  .homepage.expand .summary-temp {
    font-size: 250%;
  }
  .homepage.expand .summary-deg {
    font-size: 200%;
  }
  .homepage.expand .summary-status {
    font-size: 100%;
  }
}

@media (max-width: 500px) {
  input[type='search'] {
    width: 110px;
  }
  .search .search-button {
    width: 42px;
  }
  .navigation .navigation-item {
    width: 32px;
  }
  html[context="webapp"] .navigation .navigation-item {
    width: 36px;
  }
}

@media (max-width: 300px) {
  input[type='search'] {
    width: 90px;
  }
  .search .search-button {
    width: 36px;
  }
  .navigation .navigation-item {
    width: 22px;
  }
  html[context="webapp"] .navigation .navigation-item {
    width: 26px;
  }
  /*  */
  .homepage:not(.expand) .summary {
    padding: 12px;
  }
}