#galeria{
    margin-top: 50px;
    margin-bottom: 50px;
    top: 50px;
    bottom: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
#galeria hr{
    padding-bottom: 10px;
}

@media (max-width:768px){
   #galeria h2{
       font-size: 50px;
   }
}

#galeria .container {
   max-width: 100%;
   margin: 0 auto;
   padding: 0 2rem 2rem;
}
.gallery {
   display: flex;
   flex-wrap: wrap;
   /* Compensate for excess margin on outer gallery flex items */
   margin: -1rem -1rem;
}

.gallery-item {
   /* Minimum width of 24rem and grow to fit available space */
   flex: 1 0 24rem; /*cambiar el 24rem para que no se desborde el contenedor de las imágenes, sino
   en tamaños pequeños se sale de la pantalla, pero solo en tamaños pequeños*/
       /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
   margin: 1rem;
   box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
}

.gallery-image {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   overflow: hidden;
}


@media (max-width:450px){
   .gallery-item {
       flex: 1 0 12rem;/*cambiar el 12rem para que no se desborde el contenedor de las imágenes, sino
       en tamaños pequeños se sale de la pantalla*/
       margin: 1rem;
   }

}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) { /*NO SE DESBORDA LA PÁGINA*/
   .gallery {
       display: grid;
       /*grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));*/ /*REPITE LAS IMÁGENES*/
       grid-gap: 2rem;
   }

   .gallery,
   .gallery-item {
       margin: 0;
   }
}