/* compatibility with old homepage weather sizes */
@media (min-width: 298px) and (max-width: 300px) and (min-height: 98px) and (max-height: 100px) {
  .top {
    grid-template-areas:
      'header header'
      'placemark temp';
    align-items: center;
    gap: 6px;
  }
  .placemark {
    margin: 0;
  }
  .temp {
    justify-self: end;
  }
  .wind,
  .bottom {
    display: none;
  }
}
@media (min-width: 298px) and (max-width: 300px) and (min-height: 198px) and (max-height: 200px) {
  .top {
    grid-template-rows: repeat(2, min-content) 1fr;
    gap: 10px;
    padding-bottom: 20px;
  }
  .placemark {
    font-size: 18px;
  }
  .temp {
    font-size: 40px;
    align-self: end;
  }
  .bottom {
    display: none;
  }
}
@media (min-width: 298px) and (max-width: 300px) and (min-height: 253px) and (max-height: 255px) {
  .top {
    grid-template-rows: repeat(2, min-content) 1fr;
  }
  .bottom {
    height: 112px;
  }
  .temp {
    align-self: end;
  }
  .forecasts,
  .forecast {
    height: auto;
  }
  .forecast {
    display: grid;
    grid-template-areas: 'day symbol temp-max' 'day symbol temp-div' 'day symbol temp-min';
  }
  .weekday {
    grid-area: day;
    font-size: 17px;
    margin: 0;
  }
  .temperature.max {
    grid-area: temp-max;
  }
  .temperature.min {
    grid-area: temp-min;
  }
  .divider {
    grid-area: temp-div;
  }
  .temperature,
  .divider {
    justify-self: center;
  }
  .symbol {
    grid-area: symbol;
    height: 36px;
    margin: 0;
    justify-self: end;
  }
  .forecast-1,
  .forecast-2,
  .forecast-3 {
    display: none;
  }
}