/* -------------------------------- 

File#: _1_masonry
Title: Masonry
Descr: Gallery with elements laid out in optimal position based on available vertical space
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --masonry-grid-gap: var(--space-sm);
  --masonry-col-auto-size: 280px;
}

.masonry__loader {
  display: none;
}

.masonry__list {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--masonry-grid-gap));
  margin-bottom: calc(-1 * var(--masonry-grid-gap));
  align-content: flex-start;
}

.masonry__item {
  display: inline-block;
  width: var(--masonry-col-auto-size);
  margin-right: var(--masonry-grid-gap);
  margin-bottom: var(--masonry-grid-gap);
}

.masonry {
  position: relative;
}
.masonry h2{margin: 30px 0px;font-weight: bold;}

.masonry__loader {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.masonry__list {
  opacity: 0;
  transition: opacity 0.4s;
}

.masonry--loaded .masonry__loader {
  display: none;
}
.masonry--loaded .masonry__list {
  opacity: 1;
}

@supports (flex-basis: 0px) {
  .masonry__list {
    flex-direction: column;
  }

  .masonry__item {
    flex-basis: 0px;
  }
  .masonry__item img{
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
  }
}