/* Masonry container */
.masonry {
  column-count: 3;
  column-gap: 1em;
}

/* Masonry bricks or child elements */
.item {
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
  opacity: 0; /* Set initial opacity to 0 */
  animation-duration: 1s;
  animation-fill-mode: forwards; /* Keep the final keyframe values after animation */
}

.item.fadeIn {
  animation-name: fadeIn;
}

/* Keyframes for fade-in effect */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); /* Optional: add a slight upward movement */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item.fadeInDown {
  animation-name: fadeInDown;
}

/* Keyframes for fade-in effect with different downward movement */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.item.fadeInUp {
  animation-name: fadeInUp;
}

/* Keyframes for fade-in effect with different upward movement */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.masonry .item {
    display: none; /* Hide items initially */
}

.masonry.start-animations .item {
    display: block; /* Show items when "start-animations" class is added */
    /* Add your animation styles here */
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .masonry {column-count: 4;}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  .masonry {column-count: 5;}
}

/* No Bootstrap Class (larger desktops, 1900px and up) */
@media (min-width: 1900px) { 

}