.masonry {
  background-color: var(--cream);
  padding: 20px 15px;
}
.masonry.caption {
  padding-bottom: 0;
}
.masonry .gallery {
  cursor: pointer;
}
.masonry .wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: calc(var(--page-width) + 10px);
  margin: auto;
  width: 100%;
}
.masonry .wrapper img {
  height: 250px;
  width: 100%;
  object-fit: cover;
}
.masonry .wrapper img.cols-2 {
  width: calc((100% - 10px) / 2);
}
@media screen and (max-width: 768px) {
  .masonry .wrapper img.cols-2 {
    width: 100%;
  }
}
.masonry .wrapper img.cols-3 {
  width: calc((100% - 20px) / 3);
}
@media screen and (max-width: 768px) {
  .masonry .wrapper img.cols-3 {
    width: calc((100% - 10px) / 2);
  }
}
.masonry .wrapper img.cols-4 {
  width: calc((100% - 70px) / 4);
}
@media screen and (max-width: 768px) {
  .masonry .wrapper img.cols-4 {
    width: calc((100% - 50px) / 3);
  }
}
.masonry .wrapper img.cols-5 {
  width: calc((100% - 90px) / 5);
}
@media screen and (max-width: 1200px) {
  .masonry .wrapper img.cols-5 {
    width: calc((100% - 60px) / 4);
  }
}
@media screen and (max-width: 991px) {
  .masonry .wrapper img.cols-5 {
    width: calc((100% - 50px) / 3);
  }
}
@media screen and (max-width: 768px) {
  .masonry .wrapper img.cols-5 {
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (max-width: 600px) {
  .masonry .wrapper img.cols-2, .masonry .wrapper img.cols-3, .masonry .wrapper img.cols-4, .masonry .wrapper img.cols-5 {
    width: 100%;
  }
}
.masonry .caption {
  max-width: var(--page-width);
  font-size: 14px;
  font-weight: 400;
  font-family: "Open Sans Condensed", serif;
  line-height: 30px;
  margin: 0 auto;
  color: #666666;
  display: flex;
  padding-bottom: 5px;
}

.masonry-box {
  background-color: var(--cream);
}
.masonry-box .grid {
  max-width: calc(var(--page-width));
  margin: auto;
  padding: 15px;
}

.grid-item {
  width: calc(33% - 25px);
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .grid-item {
    width: calc(50% - 25px);
  }
}