#photosBlock {
    margin: 30px 0;
    display: grid;
    justify-content: center;
    align-content: start;    
    grid-template-columns: 300px 300px 300px;
    grid-gap: 5px;
}

#noPhotosLabel {
    margin-top: 30px;
    font-weight: 300;
    font-size: 24px;
    color: #DBDBDB;
}

#photosBlock .photoItemBlock {
    height: 300px;
    width: 300px;
}

#photosBlock .photoItemBlock .photoItem {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

#photosBlock .photoItemBlock .photoItem:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
}

@media screen and (max-width: 1024px) {
    #photosBlock {
        margin-top: 30px;
        display: grid;
        justify-content: center;
        align-content: start;    
        grid-template-columns: 300px 300px;
        grid-gap: 5px;
    }
}

@media screen and (max-width: 768px) {
    #photosBlock {
        margin-top: 30px;
        display: grid;
        justify-content: center;
        align-content: start;    
        grid-template-columns: 180px 180px;
        grid-gap: 5px;
    }
    #photosBlock .photoItemBlock {
        height: 180px;
        width: 180px;
    }
}