body {
    font-weight: 300;
    letter-spacing: .7px
}

.graphisme__content {
    width: 100vw;
    max-width: 100%
}

.img__container img,
.project {
    width: 100%;
    -webkit-transition: var(--smooth-transition);
    transition: var(--smooth-transition)
}

.graphisme__content .wrapper {
    max-width: 100%
}

.project {
    position: relative;
    -webkit-aspect-ratio: 2/1;
    aspect-ratio: 2/1
}

.img__container,
.project__content {
    width: 50%;
    height: 100%;
    min-height: 100%;
    max-width: 50%;
    -webkit-aspect-ratio: 1/1;
    aspect-ratio: 1/1
}

.project__link {
    z-index: 2
}

.img__container {
    overflow: hidden
}

.img__container img {
    -webkit-aspect-ratio: 1/1;
    aspect-ratio: 1/1;
    height: 100%;
    cursor: pointer
}

.project__content {
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    color: #555;
    -webkit-justify-content: end;
    justify-content: end;
    text-align: left;
    -webkit-align-items: start;
    align-items: start
}

.project__content p {
    margin: 0;
    font-size: 1.6rem;
    white-space: pre-line;
    color: var(--white);
    -webkit-transition: var(--smooth-transition);
    transition: var(--smooth-transition)
}

.project__content svg {
    width: 25px;
    height: 25px;
    margin-bottom: 1.5rem;
    opacity: 0;
    -webkit-transition: var(--smooth-transition);
    transition: var(--smooth-transition)
}

.slider__modal {
    position: fixed;
    width: 0%;
    height: 0%;
    opacity: 0;
    top: 50%;
    left: 50%;
    -webkit-transition: var(--quick-transition);
    transition: var(--quick-transition);
    pointer-events: none
}

.slider__modal.active {
    width: 100%;
    height: 60%;
    left: 0;
    top: 20%;
    bottom: 0;
    right: 0;
    background: var(--white);
    opacity: 1;
    z-index: 8;
    -webkit-box-shadow: 0 0 30px #555;
    box-shadow: 0 0 30px #555;
    pointer-events: all
}

@media screen and (min-width:1200px) {
    .project {
        width: 50%
    }

    .project__reversed {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .slider__modal.active {
        width: 60%;
        height: 75%;
        left: 20%;
        top: 12.5%;
        bottom: 12.5%;
        right: 20%
    }

    .project__reversed .project__content {
        text-align: right;
        -webkit-align-items: end;
        align-items: end
    }
}

.slider__img {
    -webkit-aspect-ratio: auto 3/2;
    aspect-ratio: auto 3/2;
}

.slider__container,
.slider__img__list {
    position: relative
}

.slider__container,
.slider__img,
.slider__img__list,
.slider__img_container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%
}

.slider__img_container {
    position: absolute;
    opacity: 0;
    -webkit-transition: var(--long-transition);
    transition: var(--long-transition)
}

.slider__img_container[data-active] {
    opacity: 1
}

.slider__txt__container {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 20%;
    right: 0;
    left: 0;
    background: hsl(0, 0%, 0%, .7);
    display: none
}

.slider__p {
    color: var(--white)
}

@media screen and (max-width:1349px) {
    button[data-slider-button] {
        display: none
    }

    .project__content svg {
        opacity: 1;
        width: 20px;
        height: 20px
    }
}

@media screen and (min-width:1350px) {
    button[data-slider-button] {
        display: block;
        position: absolute;
        top: calc(50% - 15px);
        border: unset;
        background: unset;
        color: var(--white);
        cursor: pointer;
        opacity: 0;
        -webkit-transform: translateY(2.5rem);
        transform: translateY(2.5rem);
        -webkit-transition: var(--quick-transition);
        transition: var(--quick-transition);
        padding: 0;
    }

    .slider__modal.active:hover button[data-slider-button],
    .slider__modal.active:hover button[data-slider-button] svg {
        opacity: .5;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    button[data-slider-button]:hover,
    button[data-slider-button]:hover svg {
        opacity: .85 !important;
    }

    button[data-slider-button] svg {
        height: 30px;
        width: 30px;
        -webkit-transition: var(--quick-transition);
        transition: var(--quick-transition);
    }

    button[data-slider-button=prev] {
        left: 1rem
    }

    button[data-slider-button=next] {
        right: 1rem
    }

    .project__content {
        padding: 6rem
    }
}

.slider__container .slider__img_container:nth-child(9) img {
    object-position: center 100%;
    -webkit-object-position: center 100%
}

@media screen and (max-width:700px) {
    .project__content {
        padding: 3rem
    }

    .project__content p {
        margin-bottom: 1rem;
        line-height: 1.4em;
        font-size: 1.45rem
    }

    .slider__modal .modal__btn__close {
        opacity: 1
    }
}

@media screen and (max-width:1199px) {
    .wrapper .project:nth-child(2n) {
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse
    }

    .project {
        width: 100vw;
        max-width: 100vw;
        height: auto
    }

    .project__content p {
        text-align: left
    }

    .wrapper .project:nth-child(2n) .project__content p {
        text-align: right
    }

    .wrapper .project:nth-child(2n) .project__content {
        text-align: right;
        -webkit-align-items: end;
        align-items: end
    }
}

@media screen and (min-width:701px) {
    .project__content {
        padding: 5rem
    }

    .project__content p {
        margin-bottom: 1rem;
        line-height: unset;
        font-size: 2rem
    }
}

.modal__btn__close:hover {
    opacity: .7;
    scale: 1.08
}

.modal__btn__close:hover {
    opacity: 1;
    scale: 1.08
}

.slider__modal.active .indicators {
    pointer-events: all;
    -webkit-transition: var(--quick-transition);
    transition: var(--quick-transition);
    opacity: .6
}

@media screen and (min-width:1200px) {
    .modal__btn__close {
        top: 1.5rem;
        right: 1.5rem
    }

    .modal__btn__close svg {
        width: 17px;
        height: 17px;
        -webkit-transition: var(--quick-transition);
        transition: var(--quick-transition)
    }

    .project__content p {
        margin-bottom: 0;
        font-size: 1.6rem;
    }
}

@media screen and (max-width:500px) {
    .indicators {
        bottom: -7%
    }
}