.illustration .round svg path{
    fill: var(--white);
}


.gallerieMobile .round svg path{
    fill: var(--white);
}


.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

}

.imageContainer{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    padding-top: 40px;
}

.photo{
    width: 40%;
    position: relative;
    transition: all ease .5s;
    opacity: 0;
}


.photo:hover{
    width: 50%;
    cursor: pointer;
    
}

.bigPictureContainer{
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: var(--headerWidth);
    height: calc(100vh - var(--headerWidth));
    width: calc(100vw - var(--headerWidth));
    margin-left: var(--headerWidth);

}

.background{
    
    background-color: var(--white);
    opacity: 50%;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
}

.bigPicture{
    height: 80%;
    transition: all ease .5s;
}


@media(max-width:  1450px){
    .grid{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        
    }
}

@media(max-width:  950px){
    .grid{
        grid-template-columns: 1fr 1fr 1fr ;
        
    }
    .bigPicture{
        width: 80%;
        height: auto;
        transition: all ease .5s;
    }
    
}


@media(max-width:  650px){
    .grid{
        grid-template-columns: 1fr 1fr ;
    
    }
}

@media(max-width:  480px){
    .grid{
        grid-template-columns: 1fr 1fr ;
    
    }

    .bigPictureContainer{
        display: none;
        position: fixed;
        align-items: center;
        justify-content: center;
        z-index: 2;
        height: calc(100svh - var(--headerWidth));
        width: 100%;
        margin-left: 0;
    }

    .gallerieMobile{
    width: 10vh;
    z-index: 12;
    border-left: 2px solid var(--black);
    }

    .gallerieMobile .round{
        border-radius: 50%;
        background-color: var(--black);

    }

}