.masonry {
  column-count: 3;
  column-gap: 15px;
}

.masonry img {
  width: 100%;
  margin-bottom: 15px;
  display: block;
  break-inside: avoid;
  padding: 10px;
  border: 2px solid var(--sale);
}

.masonry a {
  opacity: 1;
}

@media (min-width: 1200px) {
  .masonry a {
    opacity: 1;
    transition: all 0.3s linear;
  }
}

.masonry a:hover {
  filter: grayscale(100%);
}

@media (max-width: 768px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 480px) {
  .masonry {
    column-count: 1;
  }
}