.WeatherWidget {
  display: flex;
  align-items: center;
  height: 58px;
  color: var(--clr-primary);
}

.WeatherWidget .weather {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 100%;
  text-align: left;
  text-transform: capitalize;
  white-space: nowrap;
}

.WeatherWidget .weather.word {
  height: 25px;
  margin-left: 0;
}

.WeatherWidget > .weather {
  height: 72px;
  background-size: 35px 35px;
}

.heiter {
  background: url('../Images/icon-sonne.svg') no-repeat scroll center 20px transparent;
}

.wolkig {
  background: url('../Images/icon-stark-bewölkt.svg') no-repeat scroll center 20px transparent;
}

.bedeckt,
.bedeckt_n {
  background: url('../Images/icon-sonne-wolken-mix.svg') no-repeat scroll center 20px transparent;
}

.regenschauer,
.regen {
  background: url('../Images/icon-regen.svg') no-repeat scroll center 20px transparent;
}

.schneefall,
.schneeschauer {
  background: url('../Images/icon-frost.svg') no-repeat scroll center 20px transparent;
}

.schneeregen {
  background: url('../Images/icon-schneeregen.svg') no-repeat scroll center 20px transparent;
}

.gewitter {
  background: url('../Images/icon-gewitter.svg') no-repeat scroll center 20px transparent;
}

.nebel {
  background: url('../Images/icon-nebel.svg') no-repeat scroll center 20px transparent;
}

.WeatherWidget--mobile {
  height: auto;
  height: initial;
}

.WeatherWidget--desktop {
  display: none;
}

@media screen and (min-width: 1367px) {
  .WeatherWidget--mobile {
    display: none;
  }

  .WeatherWidget--desktop {
    display: flex;
  }
}