@charset "utf-8";
/* CSS Document */

	h2{
		clear:both;
	}


/*  ESTE ES EL ORIGINAL DEL EJEMPLO
	
		width:350px; /* 256px 
		height:auto;
		float:left;
		margin-right:10px;  
	}*/
	
		
        #galeria {
            margin: 1rem auto;
            width:100%;  /* 100% */
            max-width:1200px; /* 960px */
            padding:0 20px 20px;
            box-sizing: border-box;
            column-count: 4;

            /* Espacio entre columnas */
            -moz-column-gap: 20px;
            -webkit-column-gap: 20px;
            column-gap: 20px;
            
            /* Filete entre columnas */
            /*-moz-column-rule: 1px solid #bbb;
            -webkit-column-rule: 1px solid #bbb;
            column-rule: 1px solid #bbb;*/
        }
		
		
 		
        
        #galeria header {
            -webkit-column-span:all;
            column-span:all;
        }

        article {
            background:#fff;
            border-radius:5px;
            border:1px solid #ccc;
            margin:0 0 20px 0;
            text-align: center;
            max-width: 100%;
            filter: opacity(80%); /*Opacidad de las fotos ORIGINAL 70%  */

            /*Evitamos que se corte al cambiar de columna*/
            break-inside: avoid;
            page-break-inside: avoid;         
       
        }
        
        article img {
            width:100%;
        }

        article:hover {
            transition: .5s ease;
            filter: opacity(100%);
        }

        figure {
            padding:1rem;
            box-sizing: border-box;
        }

 
        /* Móviles en horizontal o tablets en vertical */
        @media (max-width: 767px) { 
            #galeria {
                columns:2;
            }

        }
        
        /* Móviles en vertical */

        @media (max-width: 480px) {
            #galeria {
                columns: 1;
            }
        }