.box-beige {
    overflow: hidden;
}

.bg-beige {
    position: relative !important;
}

.bg-beige-left::before {
    content: "";
    position: absolute;
    top: -70px;
    left: -6vw;
    width: 100%;
    height: calc(100% + 140px);
    background: #17464C;
    background: -webkit-linear-gradient(90deg, rgba(246, 219, 202, 1) 100%, rgba(0, 0, 0, 0) 0%);
    background: -moz-linear-gradient(90deg, rgba(246, 219, 202, 1) 100%, rgba(0, 0, 0, 0) 0%);
    background: linear-gradient(90deg, rgba(246, 219, 202, 1) 100%, rgba(0, 0, 0, 0) 0%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F6DBCA", endColorstr="#000000", GradientType=1);
    transition: left .3s ease;
}

.bg-beige-right::before {
    content: "";
    position: absolute;
    top: -70px;
    left: 6vw;
    width: 100%;
    height: calc(100% + 140px);
    background: #17464C;
    background: -webkit-linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
    background: -moz-linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
    background: linear-gradient(-90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F6DBCA", endColorstr="#000000", GradientType=1);
    transition: left .3s ease;
}


@media only screen and (max-width: 1200px) {
    .box-beige .text {
        --width: 30% !important;
    }
}

@media only screen and (max-width: 1500px) {
    .bg-beige-left {
        padding-left: 8%;
    }

    .bg-beige-left::before {
        left: -14%;
        background: -webkit-linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
        background: -moz-linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
        background: linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
    }

    .bg-beige-right {
        padding-right: 8%;
    }

    .bg-beige-right::before {
        left: 38%;
        background: -webkit-linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
        background: -moz-linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
        background: linear-gradient(90deg, rgba(246, 219, 202, 1) 80%, rgba(0, 0, 0, 0) 0%);
    }
}

@media only screen and (max-width: 1024px) {

    .bg-beige-left::before,
    .bg-beige-right::before {
        top: -57px;
        width: 100%;
        height: calc(100% + 114px);
    }

    .box-beige .text {
        --width: 100% !important;
    }
}