﻿.masonry-gallery {
  column-gap: 20px;
  column-count: 1;
  padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .masonry-gallery {
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .masonry-gallery {
    column-count: 3;
  }
}
.masonry-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  overflow: hidden;
  /*&.masonry-item__smaller {
      height: 360px;
      border: 1px solid red;
  }*/
  /*&:nth-child(n) {
      height: 360px;
      border: 1px solid red;
  }*/
  position: relative;
}
.masonry-item:nth-child(2n) {
  padding-bottom: 140%;
}
.masonry-item:nth-child(2n) img {
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.masonry-item:nth-child(5n) {
  padding-bottom: 100%;
}
.masonry-item:nth-child(5n) img {
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.masonry-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .masonry-item {
    transition: none;
    transform: none;
  }
}
