.weather2__details {
  border-top: 1px solid rgb(var(--c-primary));
  margin-top: 1rem;
  padding-top: 1rem;
}

.weather2__details ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.2rem 1rem;
  padding: 0;
  margin: 0;
}

.tx-weather2 {
  min-width: 250px;
  max-width: 100%;
  margin: 0;
}

div.weather2-item {
  background: rgb(var(--c-neutral-lightest));
  margin: 0;
  padding: 2rem;
  text-align: left;
  width: auto;
  border-radius: var(--b-radius);
  border-top: 0;
  border-bottom: 0;
}

div.weather2-item .primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-gap: 1rem;
}

div.weather2-item .primary .weather-data p {
  font-size: 120%;
  white-space: nowrap;
  font-weight: var(--f-weight-sb);
}

.weather-city {
  text-align: left;
}

.weather-city span {
  line-height: 120%;
}

div.weather2-report h3 {
  text-align: left;
}

.weather-temp {
  font-size: 75px;
  font-weight: var(--f-weight-m);
  color: rgb(var(--c-primary));
  justify-self: flex-start;
  line-height: 100%;
  white-space: nowrap;
}

div.weather2-item .primary .weather-icon {
  padding: 0;
  float: none;
  justify-self: flex-start;
}

div.weather-icon img {
  height: 60px !important;
  width: inherit;
  max-width: inherit;
  max-height: 60px;
}



@media (min-width: 500px) {

  div.weather2-item .primary {
    display: grid;
    grid-template-columns: max-content min-content min-content;
    align-items: center;
    grid-gap: 1rem;
}
}