body {
  margin: 0;
}

.site-grid-wrapper {
  /* width: 840px; */
  display: grid;
  grid-gap: 10px;
  /* this needs to be auto-fill to make sure it is only x wide */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  background-color: #fff;
  color: #444;
  margin-right: 10px;
}

.site-grid-box {
  background-color: #33b5e5;
  color: #fff;
  height: 180px;
  border-radius: 5px;
  padding: 20px;
  font-size: 100%;
  /* text-align: center;
  line-height: 120px */
}

.site-grid-fault {
  background-color: #ff6000;
}

.site-grid-disconnect {
  background-color: #ffb300;
}

.site-grid-box .site-grid-box {
  background-color: #ccc;
  color: #444;
  height: 140px;
}

.site-grid-layout {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 30px;
  grid-template-areas:
    "a a a a a a a a"
    "c c c c c d d d"
    "e e e e e f f f"
    "g g g g g g g h";
    align-items: start;
}

.site-grid-name {
  grid-area: a;
  text-align: left;
  font-size: 150%;
}

.site-grid-detail {
  grid-area: b;
}

.site-grid-location {
  grid-area: c;
}

.site-grid-status {
  grid-area: h;
  font-size: 120%;
}

.site-grid-timestamp {
  grid-area: g;
}