@charset "utf-8";
/* CSS Document */

body {
  padding: 25px;
  font-family: sans-serif;
  /*background-color: lightblue;*/
}

.color div div {
  width: 16vw;
  height: 8vw;
  min-width: 100%;
  min-height: 75px;
  border: none;
}

.color div {
  border: 3px solid black;
  background-color: white;
}

.color {
  display: flex;
  justify-content: center;
  text-align: center;
}

.grid-container {
  display: grid;
  column-gap: 10%;
  margin: 30px auto;
  width: 70%;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  padding: 20px;
}

.grid-item1, .grid-item2, .grid-item3{
  column-span:  1;
  grid-row: 1;
}

.grid-item4 {
  grid-column: 2 / span 1;
  grid-row: 2;
}

@media only screen and (max-width: 800px) {
  .color {
    font-size: 11px;
  }
  .grid-container {display:block;}
}