.gallery {
  max-width: 1200px;
  margin: 0 auto;
  column-count: 4;
  font-family: arial;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
.gallery-item figure {
  margin: 0;
  position: relative;
}
.gallery-item figcaption {
  
  padding: 8px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  box-sizing: border-box;
  bottom: 3px;
  color: #fff;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 
  /* border-radius: 0 0 14px 14px; */
}
.gallery-item img {
  width: 100%;
  /* border-radius: 14px; */
  border: 1px solid rgb(205, 205, 205);
}
.gallery-item p {
  margin: 0;
  padding: 8px;
}

@media screen and (max-width: 500px) {
  .gallery {
    column-count: 1;
  }
}
@media screen and (min-width: 501px) and (max-width: 700px) {
  .gallery {
    column-count: 2;
  }
}
@media screen and (min-width: 701px) and (max-width: 900px) {
  .gallery {
    column-count: 3;
  }
}