main.photos {
  margin: 0 auto;
  max-width: var(--header-width);
}

main.photos-wide {
  margin: 0 auto;
  max-width: var(--photos-wide);
}

.masonry-grid * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main.photos .masonry-grid,
main.photos-wide .masonry-grid {
  column-count: 3;
  column-gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

main.photos-wide .masonry-grid {
  column-count: 4;
}

.masonry-grid li {
  background: var(--accent-1);
  border-radius: 1rem;
  break-inside: avoid;
  margin-bottom: 1rem;
  overflow: hidden;
  position: relative;
}

.masonry-grid li::before {
  color: var(--accent-3);
  content: "Loading...";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.masonry-grid li.loaded::before {
  display: none;
}

.masonry-grid img {
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100%;
}

.masonry-grid img.visible {
  opacity: 1;
}

.masonry-grid img:hover {
  -moz-filter: brightness(70%);
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
  transition: ease-in-out 0.25s;
}

@media (max-width: 1100px) {
  main.photos .masonry-grid,
  main.photos-wide .masonry-grid {
    column-count: 3;
  }
}

@media (max-width: 600px) {
  main.photos .masonry-grid,
  main.photos-wide .masonry-grid {
    column-count: 2;
  }
}

@media (max-width: 375px) {
  main.photos .masonry-grid,
  main.photos-wide .masonry-grid {
    column-count: 1;
  }
}