.grid {
  width: 100%;
  /* max-width: 800px; 
  min-width: 800px; */
  position: relative;
}
.grid::after {
  content: "";
  display: block;
  clear: both;
}

.grid-item {
  /* float: left; */
  width: calc(33% - 10px);
  height: auto;
  padding: 5px;
  margin: 5px;
  color: white;
  font-size: auto;
  overflow: hidden;
  border: 1px dotted black;
}

.grid-item h1 {
  color: var(--text-color);
  font-size: 20px;
  padding-left: 10px;
  padding-right: 10px;
}
.grid-item p {
  font-size: 14px;
  color: var(--text-color);
  padding-left: 10px;
  padding-right: 10px;
}

.grid-item p.footer {
  border-top: 1px dotted black;
  margin: auto;
}

.grid-item img {
  width: 100%;
  padding: 10px;
  display: block;
  margin: auto;
}
  
.grid-item:nth-child(10n+0) { background: #A7E1FF; }
.grid-item:nth-child(10n+1) { background: #A7D3A6; }
.grid-item:nth-child(10n+2) { background: #FFE2FE; }
.grid-item:nth-child(10n+3) { background: #a6e9ec; }
.grid-item:nth-child(10n+4) { background: #ffc8dc; }
.grid-item:nth-child(10n+5) { background: #c9a7e8; }
.grid-item:nth-child(10n+6) { background: #84d1fa; }
.grid-item:nth-child(10n+7) { background: #f1b6c4; }
.grid-item:nth-child(10n+8) { background: #e2f4ae; }
.grid-item:nth-child(10n+9) { background: #ffd2b1; }