/*!**********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles.scss ***!
  \**********************************************************************************************************/
.twd-gallery {
  background: white;
  padding: 1rem;
}
.twd-gallery .gallery-grid-wrapper {
  column-count: 3;
  column-gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
}
.twd-gallery .gallery-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  display: inline-block;
  width: 100%;
  border: 2px solid black;
  padding: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  transition: all 0.25s ease-in-out;
}
.twd-gallery .gallery-item:hover {
  border-color: var(--brown-color);
}
.twd-gallery .gallery-item img {
  width: 100%;
  border-radius: 5px;
  filter: grayscale(100%);
  transition: all 0.25s ease-in-out;
}
.twd-gallery .gallery-item img:hover {
  filter: grayscale(0);
}
@media (max-width: 991px) {
  .twd-gallery .gallery-grid-wrapper {
    column-count: 2;
    column-gap: 1rem;
  }
}
@media (max-width: 600px) {
  .twd-gallery .gallery-grid-wrapper {
    column-count: 1;
    column-gap: 0;
    width: 95%;
  }
  .twd-gallery .gallery-item {
    margin-bottom: 1rem;
  }
}

.twd-gallery-img {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.twd-gallery-img.loaded {
  opacity: 1;
}