.c-dashboard {
  display: grid;
  grid-template-rows: 1fr 100px 100px 1fr;
  grid-template-columns: 1fr;
  height: 100%;
}

.c-dashboard--top, .c-dashboard--bottom {
  padding: 0 27px;
}

.c-dashboard--top {
  background-color: $brand-primary;
  background-image: $brand-gradient;
  color: $background-color;
  overflow: hidden;

  grid-row: 1 / 3;

  padding-top: 67px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.c-dashboard--bottom {
  grid-row: 3 / 5;

  padding-top: 140px;

  display: flex;
  flex-direction: column;
}

.c-dashboard--overlay {
  grid-row: 2 / 4;
  margin: 0 27px;
  background-color: white;
  border-radius: 10px;

  box-shadow: 0px 5px 15px rgba(111, 111, 111, 0.3);
  padding: $small-spacing-unit;
}

.c-dashboard--top, .c-dashboard--bottom, .c-dashboard--overlay {
  grid-column: 1 / 2;
}

.c-dashboard__overview {
  display: flex;
  justify-content: space-around;

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;

    > span {
      font-size: 30px;
      line-height: 36px;
      font-weight: 200;
    }
  }
}
