/* ======================================
Responsive Image gallery Style rules
======================================*/
  .container-gallery {
    padding: 40px 5%;
  }
  
  .container-gallery ul {
    list-style: none;
  }
  
  /* Responsive image gallery rules begin*/
  
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .image-gallery > li {
    flex: 1 1 auto; /* or flex: auto; */
    height: 300px;
    cursor: pointer;
    position: relative;
  }
  
  .image-gallery::after {
    content: "";
    flex-grow: 999;
  }
  
  .image-gallery li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
  }
  
  .animated{
      opacity: 0;
  }
  
  .fade-in-image {
    animation: fadeIn 4s;
    -webkit-animation: fadeIn 4s;
    -moz-animation: fadeIn 4s;
    -o-animation: fadeIn 4s;
    -ms-animation: fadeIn 4s;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }