@media only screen and (max-width: 1028px) {
    section#activites {
        .sub-section {
            &.slide {
                &:not(.animation-inversed) {
                    transform: translateX(50%);
                }

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

            &:not(.animation-inversed) {
                div.content {
                    left: -50%;
                }
            }

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

@media only screen and (max-width: 768px) {
    section#activites {
        .sub-section {
            &.slide {
                &:not(.animation-inversed) {
                    transform: translateX(75%);
                }

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

            &:not(.animation-inversed) {
                div.content {
                    left: -75%;
                }
            }

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