.photos{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 4.5vw;
    grid-gap: 10px;
}

.photos .photo{
    position: relative;
    grid-column-start: auto;
    grid-column-end: span 3;
    grid-row-start: auto;
    grid-row-end: span 2;

    background-position: center;
    background-size: cover;
    /*margin:10px;*/

}

.photos .erase{
    position: absolute;
    top:15px;
    left:15px;
    color:white;
    cursor: pointer;
}

.photos .setHome{
    position: absolute;
    top:15px;
    right:15px;
    color:white;
    cursor: pointer;
}




@media only screen and (min-width: 2000px){
    .photos .photo{

        max-height: 180px;
    }
}


@media only screen and (max-width: 2000px){
    .photos .photo{
        grid-column-end: span 3;
        grid-row-end: span 2;
    }
}

@media only screen and (max-width: 1600px){
    .photos .photo{
        grid-column-end: span 3;
        grid-row-end: span 3;
    }
}

@media only screen and (max-width: 1200px){
    .photos .photo{
        grid-column-end: span 4;
        grid-row-end: span 3;
    }
}
@media only screen and (max-width: 992px){
    .photos .photo{
        grid-column-end: span 4;
        grid-row-end: span 4;
    }
}
@media only screen and (max-width: 768px){
    .photos .photo{
        grid-column-end: span 6;
        grid-row-end: span 5;
    }
}
@media only screen and (max-width: 500px){
    .photos .photo{
        grid-column-end: span 12;
        grid-row-end: span 10;
    }
}