*{
    margin: 0;
}

.img-gallery{
    display: flex;
    gap: 1rem;
    margin: 5vw;
}

.gallery-item1{
    flex: 33%;
    padding: 1rem;
    animation-name: translate1;
    animation-duration: 3s;
    animation-delay: 1s;
}
.gallery-item1 img{
    object-fit: cover;
    width: 100%;
    height: 30vw;
}
@keyframes translate1{
        0%{transform:none;

        }

        25%{transform: translateY(20px);

        }
        
        50%{transform: translateY(40px);


        }
        
        75%{transform:translateY(20px);


        }
        
        100%{
            transform:none;
}
}

.gallery-item2{
    flex: 33%;
    padding: 1rem;
    animation-name: translate2;
    animation-duration: 3s;
    animation-delay: 2s;
}
.gallery-item2 img{
    object-fit: cover;
    width: 100%;
    height: 30vw;
}
@keyframes translate2{
0%{transform:none;

        }

        25%{transform: translateY(20px);

        }
        
        50%{transform: translateY(40px);


        }
        
        75%{transform:translateY(20px);


        }
        
        100%{
            transform:none;
}
}

.gallery-item3{
    flex: 33%;
    padding: 1rem;
    animation-name: translate3;
    animation-duration: 3s;
    animation-delay: 3s;
}

   .gallery-item3 img{
    object-fit: cover;
    width: 100%;
    height: 30vw;
} 

@keyframes translate3{
0%{transform:none;

        }

        25%{transform: translateY(20px);

        }
        
        50%{transform: translateY(40px);


        }
        
        75%{transform:translateY(20px);


        }
        
        100%{
   
            transform:none;
}
}