html, body{
    background-color: #fff;
    min-height: 100vh;
/*
    height: 100vh;
    overflow: hidden;
*/
}
body, h1,h2,h3,h4,h5,h6,p, ul, li, a{margin: 0;padding: 0;font-family:sans-serif;}


a{
    text-decoration: none;
}

 section{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
    height: 100vh;
}

.foto{
/*    background-color: tomato;*/
    flex: 1 1 150px;
    background-position: center;
    background-size: cover;
     place-items: center;
    background-color: #000;
    transition: all 0.3s;
     border: 0px solid #FFF;
}

.foto5{
    display: grid;
    place-items:center;
    padding: 5%;
}
.foto5 svg{
    max-height: 250px;
}

.foto1{    background-image: url(../img/07.jpg);}
.foto2{    background-image: url(../img/04.jpg);}
.foto3{    background-image: url(../img/08.jpg);}
.foto4{    background-image: url(../img/02.jpg);}
/*.foto5{    background-image: url(../img/08.jpg);}*/
.foto6{    background-image: url(../img/06.jpg);}
.foto7{    background-image: url(../img/01.jpg);}
.foto8{    background-image: url(../img/03.jpg);}
.foto9{    background-image: url(../img/05.jpg);}

.foto:hover{
    cursor: pointer;
    mix-blend-mode: luminosity;
    border: 30px solid #FFF;
}


@media 
only screen and (min-device-width: 768px) and (max-device-width: 991px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .foto:hover{
        border: 3px solid #FFF;
    }
}