<style>


.foto {
    opacity: 0;
    animation-name: animacao;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

@keyframes animacao {
    25% {
        opacity: 1;
        transform: scale(1.1, 1.1);
    }

    100% {
        opacity: 0;
    }
}

.foto:nth-child(1) {
 animation-delay: 0;
}

.foto:nth-child(2) {
    animation-delay: 10s;
}

.foto:nth-child(3) {
    animation-delay: 15s;

}

.foto:nth-child(4) {
    animation-delay: 20s;

}

.foto:nth-child(5) {
    animation-delay: 25s;

}
    </style>

<div class="container-fluid h-100 mt-lg-0">
            <div class="row align-items-center h-100">
                <!-- SMARTPHONES IMAGE -->
                <div class="col-lg-7 d-none d-lg-block mb-5 py-5" style="border: 0px red solid; background-image: url('/dist/img/9364675fb26a.png');background-size: 28rem; background-position: top right; background-repeat: no-repeat;">
                    <div class="d-flex justify-content-end mt-4 mr-4 mb-5 pt-3 pr-3">
                        <div class="galeria">
                            <img src="/dist/img/d6bf0c928b5a.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/177140221987.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/ff2c097a681e.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/b27a108592d8.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                            <img src="/dist/img/5e04169b9308.jpg" alt="Responsive image"  class="foto" style="border: 1px rgba(0,0,0, .2) solid; width: 15.5rem;">
                        </div>
                    </div>
                </div>
           </div>
      </div>