.works-box {
    .arrows {
        justify-content: space-between;
        align-items: flex-start;
        display: flex;
    }
    .arrows_box {
        width: 12px;
        height: 12px;
    }
    .arrows_box.is-left {
        border-top: 1px solid;
        border-left: 1px solid;
        border-color: var(--color-light);
    }
    .arrows_box.is-right {
        border-top: 1px solid;
        border-right: 1px solid;
        border-color: var(--color-light);
    }

    .tagline {
        margin-bottom: var(--size--120);
    }

    .textfield-row {
        padding-bottom: var(--size--112);
    }

    .rounded {
        border-radius: var(--size--20);
    }
    .textfield {
        text-indent: 11ch;
        strong {
            color: var(--color-light);
            font-weight: 400;
            font-family: var(--font-main);
        }
    }

    .textnumbers {
        margin-bottom: var(--size--52) !important;
    }

    img,
    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.boxes-wrapper {
    padding-right: var(--size--280);
    padding-left: var(--size--280);
    padding-bottom: var(--size--160);
    position: relative;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: var(--size--280);
        width: 1px;
        height: 100%;
        background-color: var(--color-4)
    }
    &:after {
        content: "";
        position: absolute;
        top: 0;
        right: var(--size--280);
        width: 1px;
        height: 100%;
        background-color: var(--color-4)
    }

    .row {
        margin-left: 0;
        margin-right: 0;
        .box-col {
            padding-left: 0;
            padding-right: 0;
        }
    }
    .box-content {
        padding: var(--size--40) var(--size--52) var(--size--24);
    }
    .first-row,
    .last-row {
        position: relative;
    }
    .cross {
        width: var(--size--12);
        height: var(--size--12);
        justify-content: center;
        align-items: center;
        display: flex;
        color: var(--color-5);
        position: absolute;
        z-index: 1;
        .cross-line,
        &:before,
        &:after {

            content: "";
            background-color: currentColor;
            width: 100%;
            height: 1px;
            position: absolute;
        }
        .cross-line-vertical,
        &:after {
            width: 1px;
            height: 100%;
        }
    }
    .tl {
        top: 0px;
        left: var(--size--280);
        transform: translate(-50%, -50%);
    }
    .tr {
        top: 0;
        right: var(--size--280);
        transform: translate(50%, -50%);
    }
    .bl {
        left: var(--size--280);
        bottom: var(--size--160);
        transform: translate(-50%, 50%);
    }
    .br {
        right: var(--size--280);
        bottom: var(--size--160);
        transform: translate(50%, 50%);
    }

    .box-col {
        border-left: 1px solid var(--color-4);
    }

    .box-col.first-box {
        border-left: unset;
    }

    .box-content p {
        margin-bottom: 0;
    }

    .vline-left {
        left: var(--size--280);
    }
    .vline-right {
        right: var(--size--280);
    }
}



.boxes_divider {
    width: calc((var(--size--280) + var(--size--container)) * 2 + 100%);
    margin-left: calc((var(--size--280) + var(--size--container)) * -1);
    background-color: var(--color-4);
    height: 1px;
}

.boxes-wrapper::before,
.boxes-wrapper::after {
    display: none; /* replaced by JS-injected .vline-left / .vline-right for animation */
}


.works-box.no_lines {
    .boxes_divider {
        display: none;
    }
    .boxes-wrapper {
        .box-col {
            border: none;
            outline-offset: unset;
            outline: none;
        }
        .cross {
            display: none;
        }
    }
}

.works-box.no_numbers {
    .textnumbers {
        display: none;
    }
}
.works-box.no_paddings {
    .boxes-wrapper .box-content {
        padding: 0;
        height: 100%;
    }
}

.works-title {
    h2 {
        padding-bottom: var(--size--60);
    }
}


.works-box {
   .bg-light-mode {
        background-color: var(--color-light);
        .textfield {
            strong {
                color: var(--color-3);
            }
        }
        .textnumbers {
            color: var(--color-8);
        }

        .boxes-wrapper {
            .cross {
                &:before,
                &:after {
                    background-color: #ff0000;
                }
            }
        }
    }
}

@media screen and (max-width: 991px) {
    .works-title {
        h2 {
            padding-bottom: var(--size--32);
        }
    }
    .boxes-wrapper {
        padding-right: 0;
        padding-bottom: var(--size--20);
        padding-left: 0;
        &:before {
            left: var(--size--20);
        }
        &:after {
            right: var(--size--20);
        }
    }
    .boxes_divider {
        display: none;
    }

    .boxes-wrapper {
        padding-right: var(--size--container);
        padding-left: var(--size--container);

        .vline-left,
        .vline-right {
            display: none;
        }

        .row {
            padding-right: 0;
            padding-left: 0;
            display: block;
            grid-template-rows: auto;
            grid-template-columns: 1fr 1fr;
            grid-auto-columns: 1fr;
            display: grid;
        }
        .box-col {
            max-width: 100%;
            flex-basis: unset;
            border-left: none;
            outline-offset: -.5px;
            outline: 1px solid var(--color-4);
            &:last-child {
                border-right: none;
                &:before,
                &:after {
                    content: none;
                }
            }

            &:first-child {
                &:after {
                    content: none;
                }
            }
        }

    }
    .works-box .tagline {
        margin-bottom: var(--size--80);
    }
    .works-box .arrows {
        margin-bottom: var(--size--30);
    }
    .sm-pt-20 {
        padding-top: var(--size--20);
    }

    .works-box .textfield {
        text-indent: var(--sm-indent, var(--indent));
    }

    .boxes-wrapper {
        padding-left: 0;
        padding-right: 0;
        .tr,
        .br {
            right: 0;
        }
        .tl,
        .bl {
            left: 0;
        }

        .bl,
        .br {
            bottom: var(--size--20);
        }
    }
}

@media screen and (max-width: 479px) {
    .boxes-wrapper .row {
        grid-template-columns: 1fr;
    }
    .works-box {
        > .site-container {
            padding-left: 0;
            padding-right: 0;
        }
        .rounded {
            border-radius: 0
        }
    }

    .works-box .textfield-row {
        padding-bottom: var(--size--60);
    }
    .boxes-wrapper {
        .box-content {
            padding: var(--size--20) var(--size--20) var(--size--40);
        }
    }
    
}