.document {
    max-width: 1520px;
    width: 100%;
    
    margin-inline: auto;
    padding-block: 5rem;
}

.document__title {
    margin-bottom: 2.5rem;
}

.document__header {
    background-color: var(--blue);
    box-shadow: 0px 3.75px 22.5px 0px rgba(0, 0, 0, 0.16);
    border-radius: 9px;
    
    position: relative;
}

.document__content--header {
    padding-left: 2.5rem;
    padding-block: 3rem;
    
    color: var(--white);
    
    max-width: 710px;
    width: 100%;
}

.document__subtitle {
    font-size: 1.75rem;
    text-transform: uppercase;
    font-weight: 500;
    
    margin-top: 0;
    margin-bottom: 1.75rem;
}

.document__text {
    font-weight: 500;
    
    margin-block: 0;
}

.document__decor {
    position: absolute;;
}

.document__decor--header {
    top: 0;
    right: 0;
    
    height: 100%;
}

.document__decor--header > img {
    height: 100%;
}


.document__body {
    box-shadow: 0px 3.75px 22.5px 0px rgba(0, 0, 0, 0.16);
    border-radius: 9px;
    
    margin-top: 1.25rem;
    
    position: relative;
}

.document__content--body {
    margin-left: auto;
    margin-right: 0;
    
    padding-block: 3rem;
    padding-right: 2.5rem;
    
    max-width: 967px;
    width: 100%;
}

.document__text--body {
    color: var(--black);
    font-size: var(--text5-size);
    font-weight: 500;
    
    margin-bottom: 1.75rem;
}

.document__decor--body {
    top: 0;
    left: 0;
}



.document__decor-img--mobile {
    display: none;
}


@media(max-width: 1536px) {
    .document {
        width: auto;
        
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    
    .document__content--header {
        width: 50%;
    }
    
    .document__content--body {
        max-width: 55%;
    }
    
    
    .document__header:after {
        content: '';
        
        position: absolute;
        top: 0;
        left: 0;
        
        width: 100%;
        height: 100%;
        
        background-color: var(--blue);
        
        opacity: .6;
    }
    
    .document__content--header {
        position: relative;
        
        width: 100%;
        max-width: 100%;
        
        z-index: 2;
    }
}

@media(max-width: 1024px) {
    .document__header {
        position: relative;
    }
    
    
    .document__body {
        position: relative;
    }
    
    .document__body:after {
        content: '';
        
        position: absolute;
        top: 0;
        left: 0;
        
        width: 100%;
        height: 100%;
        
        background-color: var(--white);
        
        opacity: .5;
    }
    
    .document__content--body {
        position: relative;
        
        width: 62%;
        max-width: 100%;
        
        z-index: 2;
    }
}

@media(max-width: 767px) {
    .document__decor-img--desktop {
        display: none;
    }
    
    .document__decor-img--mobile {
        display: block;
        
        width: 100%;
    }
    
    .document__header:after,
    .document__body:after {
        display: none;
    }
    
    .document__content--header {
        padding-inline: 1rem;
    }
    
    .document__body {
        display: grid;
    }
    
    .document__decor {
        position: relative;
        
        top: auto;
        right: auto;
    }
    
    .document__decor--body {
        order: 2;
    }
    
    .document__content--body {
        width: 100%;
        
        padding-block: 2rem;
        padding-inline: 1.5rem;
    }
    
    .document__text--body {
        font-size: var(--text4-size);
    }
    
    
    .document__content--body > .button {
        padding-inline: 1.2rem;
    }
}