.article4 {
    position: relative;
}
.article4::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 22%;
    background-color: var(--main-color);
    z-index: 1;
}

.a4-mockup {
    position: absolute;
    bottom: 2%; right: 8%;
    height: 80%;
    z-index: 2;
}

.article4 .p-text.dark {
    margin-bottom: 5rem;
}


/*=========================================================*/
@media (min-width: 2250px) {
    .a4-mockup {
        right: 15%;
    }
}


@media (max-width: 1250px) {
    .article4::after {
        height: 40%;
    }
    
    .a4-mockup {
        width: 60%;
        margin-left: 50%;
    }
}


@media (max-width: 768px) {
    .article4::after {
        height: 25%;
    }
    
    .a4-mockup {
        width: 90%;
        margin-left: 30%;
    }
}


@media (max-width: 550px) {
    .article4 .p-text.dark {
        margin-bottom: 3rem;
    }
}


@media (max-width: 450px) {
    .a4-mockup {
        width: 80%;
        margin-left: 25%;
    }
}