@media only screen and (max-width: 1028px) {
    section#activites {
        div.content {
            &:not(.animation-inversed) {
                left: -50%;
            }

            &.animation-inversed {
                right: -50%;
            }
        }

        div.content.slide-in, div.bg-img.slide-out {
            &:not(.animation-inversed) {
                transform: translateX(50%);
            }

            &.animation-inversed {
                transform: translateX(-50%);
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    section#activites {
        div.content {
            &:not(.animation-inversed) {
                left: -75%;
            }

            &.animation-inversed {
                right: -75%;
            }
        }

        div.content.slide-in, div.bg-img.slide-out {
            &:not(.animation-inversed) {
                transform: translateX(75%);
            }

            &.animation-inversed {
                transform: translateX(-75%);
            }
        }
    }
}