.grid-container {
  display: grid; /* This CSS was made for Convention info page */
  grid-template-columns: 1fr; /* mobile default */
}

/* Desktop */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 20% 80%;
  }
}

.grid-item1 {
  background-color: rgb(157, 201, 169);
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.grid-item2 {
  background-color: rgb(184, 162, 142);
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}
.grid-item3 {
  background-color: rgb(237, 171, 55);
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

.grid-item-body {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: left;
  color: #000000;
}