.weather-block {  
  display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 0.8fr;
    gap: 15px 15px;
    grid-auto-flow: row;
    line-height: 1.5;
    grid-template-areas: 
      "top-line"
      "uv"
      "precip"
      "wind";
  }

  .weather-block-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .weather-block-header h4 {
    font-size: 1.5em;
    margin: 0;
  }

  .weather-block span.label {
    display: block;
    justify-self: center;
    font-size: 0.4em;
    text-transform: uppercase;
    opacity: 90%;
  }

  .bordered-grid-item {
    border: 1px solid #ccc;
    padding: 10px;
  }
  
  .weather-block .top-line {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 15px 15px;
    grid-auto-flow: row;
    grid-template-areas:
      "temp humidity";
    grid-area: top-line;
  }
  
  .weather-block .top-line .temp { 
    grid-area: temp;
    display: flex;
    flex-flow: column;
  }

  .weather-block .top-line .temp .main { 
    grid-area: main; 
    justify-self: center;
    text-align: center;
    font-size: 3em;
  }
  
  .weather-block .top-line .temp .sub {  
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    grid-area: sub;
  }

  .weather-block .top-line .temp .sub .wind-chill {
    justify-self: center;
    text-align: center;
    font-size: 1.5em;
    grid-area: wind-chill;
  }

  .weather-block .top-line .temp .sub .actual {
    justify-self: center;
    text-align: center;
    font-size: 1.5em;
    grid-area: actual;
  }
  
  .weather-block .top-line .humidity {  
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-area: humidity;
    justify-content: center;
    align-items: center;
  }

  .weather-block .top-line .humidity .main { 
    justify-self: center;
    text-align: center;
    font-size: 3em;
  }
  
  .i5 {  
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 15px 15px;
    grid-auto-flow: row;
    grid-template-areas:
      "wind pressure";
  }
  
  .pressure { 
    grid-area: pressure; 
    display: grid;
    justify-content: center;
  }

  .pressure .measurement {
    justify-self: center;
    text-align: center;
    font-size: 1.75em;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  
  .wind { 
    display: grid;
    grid-area: wind;
  }

  .wind .speed, .wind .gust, .wind .direction {
    justify-self: center;
    text-align: center;
    font-size: 1.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }
  
  .uv {  
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-area: uv;
    
  }
  
  .uv-items {  
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "uv-number uv-message";
    justify-content: center;
    text-align: center;
  }

  .uv-number {
    font-size: 3em;
    display: grid;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .uv-message {
    font-size: 1.25em;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .precipitation {  
    display: grid;
    grid-area: precip;
  }

  .precipitation .amount, .precipitation .rate, .precipitation .dewpoint {
    justify-self: center;
    text-align: center;
    font-size: 1.75em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .precipitation .measurements {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
  }

  .wind .measurements {
    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . .";
  }

  img {
    align-self: end;
  }

  .temp img {
    margin-top: 10px;
  }

  .pressure-trend {
    font-size: 1em;
    text-align: center;
    align-self: center;
  }

  @media (max-width: 650px) {
    .weather-block .top-line, .weather-block .i5, .weather-block .i5 .wind .measurements, .weather-block .i5 .wind, .weather-block .uv, .weather-block .uv .uv-items, .weather-block .precipitation .measurements {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
  }
  .weather-block .top-line {
    grid-template-areas:
      "temp"
      "humidity";
  }
  .weather-block .i5 {
    grid-template-areas:
      "wind"
      "pressure";
  }
  .weather-block .uv-items {
    grid-template-areas:
      "uv-number"
      "uv-message";
  }
  .weather-block .precipitation .measurements {
    grid-template-areas: 
    "amount"
    "rate"
    "dewpoint";
  }
  .weather-block .precipitation img, .weather-block .wind img {
    max-width: 100%;
  }
  .weather-block .i5 .wind .measurements {
    grid-template-areas: 
    "speed"
    "direction"
    "gust";
  }
  img {
    align-self: center;
    justify-self: center;
    vertical-align: bottom;
  }
}