html, body {
            margin:0;
            padding:0;
        }
        

        body {            
            background-color: #a8c7e6;
        }

        header {
            text-align: center;
        }
        
        main > header {
            background-color: #02223a;
        }

        h1 {
            color:black;
            font-size: 35px;
            font-size:3rem;
            -webkit-column-span:all;
            -moz-column-span:all;
            column-span:all;
        }

        #articulo {
            text-decoration: none;
            font-size: 25px;
            color:#036;
        }

        #galeria {
            margin: 1rem auto;
            width:80%;            
            padding:0 20px 20px;
            box-sizing: border-box;
            column-count: 3;

            /* 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(100%);

            /*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(50%);            
        }

        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;
            }
        }