.grid{
  width:100%;
  margin:20px auto;
  box-sizing:border-box;
  column-count: 4;
  column-gap: 15px;
  vertical-align:top;
}

.grid img{
  width:100%;
  vertical-align:bottom;
}
.img-colonne{
  max-width: 280px;
}

.box10 {
  background: #FCF7E7;
  text-align: justify;
  padding: 10px 10px;
  box-shadow: var(--shadow);
  border: 1px solid #777777;
  border-radius: 5px;
}

.box11 {
  background: #f1f1f1;
  text-align: justify;
  padding: 10px 10px;
  box-shadow: var(--shadow);
  border: 1px solid #777777;
  border-radius: 5px;
}


@media only screen and (max-width: 1000px) {
  .grid{column-count: 3;}
}
@media only screen and (max-width: 800px) {
  .grid{column-count: 2;}
}
@media only screen and (max-width: 500px) {
  .grid{column-count: 1;}
}