@media (max-width:800px) {
    #services {
        grid-template-columns: auto !important;
        grid-template-rows: repeat(3, 33.33%);
    }
    
    .beard, .clasic, .model {
        height: 100%;
    }

    .beard {
        grid-row: 1;
        grid-column: 1 !important;
    }

    .model {
        grid-row: 2;
        grid-column: 1 !important;

    }

    .clasic {
        grid-row: 3 !important;
        grid-column: 1 !important;

    }

    #services img {
        height: 100% !important;
        box-sizing: border-box !important;
        width: 100vw !important;
    }
}

#services {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 33.33%);
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

#services img {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    object-fit: cover;
    justify-content: center;

}

.beard, .clasic, .model {
    width: 100%;
    /* position: absolute; */
    display: flex;
    box-sizing: border-box;
    filter:sepia(100%) grayscale(50%) brightness(50%);
    transition: all 0.2s ease-in-out;
}

#services p {
    position: absolute;
}

.beard {
    grid-column: 1;
    justify-self: start;
    z-index: 3;
}

.model {
    grid-column: 2;
    justify-self: center;
    z-index: 2;
}

.clasic {
    grid-column: 3;
    justify-self: end;
    z-index: 1;
}

.beard:hover, .clasic:hover, .model:hover {
    z-index: 4;
    filter:sepia(0%) grayscale(0%) brightness(100%);
}

#services p {
    align-self: flex-end;
    justify-self: end;
    right: 0;
    margin-right: 5%;
    color: white;
    font-size: calc(15px + 0.4vh + 0.4vw);
}