*{
    padding: 0;
    font-size: 16px;
    font-weight: bold;
}

body {
    font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    background-color: #6DF2F2;
}

header {
    text-align: center;
    font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif; 
}

main > header {
    background-color: #F2F2F2;
}

h1 {
    color: #03318C;
    font-size: 18px;
    font-size:3rem;
    -webkit-column-span:all;
    -moz-column-span:all;
    column-span:all;
}

a {
    text-decoration: none;
    color:#f3f3f3;
}

#galeria {
    margin: 1rem auto;
    width:100%;
    max-width:960px;
    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;
}

#galeria header {
    -webkit-column-span:all;
    column-span:all;
}

article {
    background:#03318C;
    border-radius:30px;
    border:2px solid #F2F2F2;
    margin:0 0 20px 0;
    text-align: center;
    max-width: 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(100%);
    background-color: black;

}

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