/* ---------------- header ---------------- */

.header {
  grid-area: header;
  background: #181b1f;
  display: grid;
  grid-template-columns: 1fr 2fr 0.5fr 2fr 1fr;
  height: 100%;
}

.logo {
  height: 100px;
  grid-column: 1;
  width: auto;
  display: flex;
  place-self: center;
}

.brand {
  grid-column: 2;
  justify-self: start;
  display: flex;
  align-items: center;
}

.brand-bar {
  width: 1px;
  height: 30px;
  background: #2a2f35;
}

.brand-text {
  font-size: 20px;
  letter-spacing: 2px;
  padding-left: 25px;
  color: #657381;
}

/* ---------------- gutters / footer ---------------- */

.lgutter {
  grid-area: lgutter;
  background: #181b1f;
}
.rgutter {
  grid-area: rgutter;
  background: #181b1f;
}

.footer {
  grid-area: footer;
  background: #181b1f;
}