#work {
    margin-top: 400px;
    text-align: center;
}

#work h3 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 50px;
}

#work ul {
    list-style-type: none;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
}


/* Slider */

#work #slider {
    --imgWidth: 75px;
    --rightGap: 40px;
    --leftGap: 30px;
    --textWidth: 30vw;
    --marginGap: 20px;
    --widthTotal: calc(var(--imgWidth) + var(--textWidth) + var(--rightGap) + var(--leftGap) + var(--marginGap));

    width: var(--widthTotal);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}


#work .slide {
    margin-right: calc(var(--marginGap) / 2);
    margin-left: calc(var(--marginGap) / 2);
    margin-top: auto;
    margin-bottom: auto;
}

#work #slides {
    display: flex;
    flex-flow: row;
    transition: 1s;
}

#work .slide a {
    height: fit-content;
    width: fit-content;
    margin-top: auto;
    margin-bottom: auto;
}

#work .slide a img {
    width: var(--imgWidth);
    margin-right: var(--rightGap);
    margin-left: var(--leftGap);
}

#work .slide p {
    width: var(--textWidth);
    text-align: justify;
}

#work .slide .date {
    text-align: center;
    margin: auto;
}

#work .slide h4 {
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
}

#work #slideLeft {
    transform: rotate(180deg);
    margin-left: 25vw;
    margin-top: auto;
    margin-bottom: auto;
    height: fit-content;
}

#work #slideRight {
    margin-right: 25vw;
    margin-top: auto;
    margin-bottom: auto;
    height: fit-content;
}

#work button:hover {
    filter: invert(14%) sepia(93%) saturate(5725%) hue-rotate(228deg) brightness(101%) contrast(109%);
}

#work #résuméDownload {
    height: 12px;
    font-size: 12px;
}

#work #résuméDownload img {
    height: 14px;
    width: 14px;
    vertical-align: middle;

}


/* Mobile */

@media (max-width: 800px) {

    #work h3 {
        font-size: 1.5em;
    }

    #work #slider {
        --textWidth: 75vw;
        --marginGap: 10px;
        --widthTotal: calc(var(--textWidth) + var(--marginGap));

        width: var(--widthTotal);
        height: auto;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
    }

    #work ul {
        margin-top: 0;
    }

    #work .slide {
        margin-top: 0;
        margin-bottom: auto;
    }


    #work .slide p {
        width: calc(var(--textWidth));
        text-align: justify;
        margin-right: auto;
        margin-left: auto;
    }

    #work .slide div {
        display: flex;
        flex-flow: column;
    }

    #work .slide img {
        display: none;
    }

    #work #slideLeft {
        margin-right: auto;
        margin-left: auto;
        margin-top: 0;
        margin-bottom: auto;
        transform: rotate(180deg) translateX(-10px);
        height: fit-content;
    }

    #work #slideRight {
        margin-right: auto;
        margin-top: 0;
        margin-bottom: auto;
        transform: translateX(-10px);;
        height: fit-content;
    }

    #work button:hover {
        filter: none;
    }
}