/** @format */

.item1 {
  color: #004a67;
  background: #09b0d4;
}
.item2 {
  color: #748634;
  background: #c1cc70;
}
.item3 {
  color: #fff;
  background: #f35e7b;
}
.item4 {
  color: #c37b0d;
  background: #f7c05b;
}
.item5 {
  color: #c1465b;
  background: #fc96a3;
}
.item6 {
  color: #e42828;
  background: #d83f3f;
}
.item7 {
  color: #c0daeb;
  background: #f2eecb;
}
.item8 {
  color: #09893f;
  background: #6bb383;
}
.item9 {
  color: #005762;
  background: #a2ddeb;
}
.item10 {
  color: #00346b;
  background: #9aadce;
}
.item11 {
  color: #b57909;
  background: #eabd6c;
}
.item12 {
  color: #c21d45;
  background: #f89cab;
}
.item13 {
  background: #0f8cba;
}
.item14 {
  color: #94132f;
  background: #f05c7e;
}
.item15 {
  color: #06512a;
  background: #249557;
}
.item16 {
  color: #044352;
  background: #2a9cb6;
}

.grid-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: auto auto auto auto;
  row-gap: 5px;
  column-gap: 5px;
  background-color: #000000;
}

.item {
  width: 100%;
  height: 100%;
  /* padding: 5px 5px; */
  box-sizing: border-box;
}

.item:hover {
  background-color: rgba(186, 195, 196, 0.822);
}

.item3 {
  grid-row: span 2;
  grid-column: span 2;
}

.item4 {
  grid-column: span 2;
}

.item7 {
  grid-row: span 2;
}

.item10 {
  grid-column: span 1;
}

.item15 {
  grid-row: span 2;
}

.item16 {
  grid-column: span 3;
}