style.css

*{
    margin:0;
    padding:0;
    -webkit-box-sizing_border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

body{
    background: white;
}

h1{
    text-align:center;
    font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding:15px;
}

h2{
    text-align:center;
    font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding-bottom:10px;
}

.gallery{
    width:90%;
    max-width:100%;
    margin:0 auto;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ns-flex;
    display:flex;
    flex-wrap:wrap;     /*Make the flexible items wrap if necessary:*/
    flex-direction:row; /*Set the direction of the flexible items inside the <div> element in reverse order:*/
    padding: 0px;
}

.gallery div{
    flex:auto;          /*Let all the flexible items be the same length, regardless of its content:*/
    -webkit-flex:auto;  /* Safari 6.1+ */
    -ms-flex:auto;      /* IE 10 */
    width:250px;
    overflow:hidden;
    margin:8px;
    border:6px solid #fff;
    box-shadow:0 0 3px 1px #222;
    border-radius:4px;
}

.gallery div:hover{
    opacity:0.7;
    transition:all ease-in-out 0.2s;
    transform: scale(1.05, 1.05);
}

img{
    width:100%; /*decommentare per responsive*/
/*  width:100px; */
    height:auto;
}