<div>
  <style type="text/css">
    .weather_widget1{
      background: #06dd95;
      display: inline-block;
      width: 100%;
      padding: 1.5em 0.8em;;
      font-size: 1.3em;
      font-weight: bold;
    }
    .weather_widget1 .white_text{
      color: #ffffff;
      font-size: 1.5em;
      overflow-wrap: break-word;
    }
    .weatherICON{
      padding: 0;
    }
    .weatherICON img{
      width: 100%;
    }
  </style>
  <div class="weather_widget1" data-list="weather" data-level="0">
    <div class="col-sm-12 columns weatherBlock">
      <div class="col-sm-4 columns weatherICON">
        <img src="{{wx_svg}}" data-name="wx_svg" title="{{wx_text}}" alt="{{wx_text}}" />
      </div>
      <div class="col-sm-4 columns">
        <div class="weatherTXT" data-name="wx_text">{{wx_text}}</div>
        <div class="Tempature white_text" data-name="avgt">{{avgt}}<span>℃</span></div>
      </div>
      <div class="col-sm-4 columns">
        <div class="UviItem">{{uv-head}}</div>
        <div class="UviText white_text" data-name="uvi_text">{{uvi_text}}</div>
      </div>
    </div>
    <div class="col-sm-12 columns weatherBlock">
      <div class="col-sm-4 columns">
        <div class="weatherItem">{{relative_humidity-head}}</div>
        <div class="weatherItemNum white_text"><span data-name="rh">{{rh}}</span>%</div>
      </div>
      <div class="col-sm-4 columns">
        <div class="weatherItem">{{current_wind_speed-head}}</div>
        <div class="weatherItemNum white_text"><span data-name="ws">{{ws}}</span>m/s</div>
      </div>
      <div class="col-sm-4 columns">
        <div class="weatherItem">{{accumulated_rainfall-head}}</div>
        <div class="weatherItemNum white_text"><span data-name="rain">{{rain}}</span>mm</div>
      </div>
    </div>
  </div>
</div>