.controls {
  background-color: rgba(0, 95, 107, 0.1);
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(180px, 1fr);
  grid-auto-flow: row;
  grid-gap: 20px;
}

/*
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: repeat(6, 150px);
  grid-auto-flow: row;
  grid-gap: 20px;
  background-color: orange;
} */
.grid li {
  border: 1px solid rgb(0, 95, 107);
  border-radius: 3px;
  background-color: rgba(0, 95, 107, 0.8);
  padding: 0.2em;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.flat-number {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
}
.payment {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  align-self: center;
}
.recorded-at {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  font-size: 70%;
}