/* 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: 3;}

}



/* 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: 4;}

}



/* No Bootstrap Class (larger desktops, 1900px and up) */

@media (min-width: 1900px) { 



}