.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;
    }
}

/* Reveal Animation Keyframes */
@keyframes revealImage {
    from {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }

    to {
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
    }
}

@keyframes drawStroke {
    from {
        stroke-dashoffset: 628;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.box-col .box-content {
    position: relative;
    overflow: visible;

    .image-wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        overflow: visible;
        border-radius: 100%;
        transition: all .6s ease;
    }

    &:hover .image-wrapper {
        background-color: var(--hover-color, #FF6D07);
        transition: all .6s ease;
    }

    &:hover .image-stroke {
        color: var(--hover-color, #FF6D07);
    }

    img,
    video {
        position: relative;
        opacity: 0;
    }

    .image-stroke {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%) rotate(-90deg);
        stroke-dasharray: 650;
        stroke-dashoffset: 650;
        color: var(--color-light);
        overflow: visible;
    }
}


.round_images {
    .box-col {
        img {
            clip-path: circle(0% at 50% 50%);
            border-radius: 50%;
        }
    }
}


/* Animation triggered class */
.box-col.is-revealing .box-content {

    img,
    video {
        animation: revealImage 6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .image-stroke {
        animation: drawStroke 2s ease-out forwards;
    }
}

/* Stagger animations for each item in row */
.row .box-col.is-revealing {

    &:nth-child(1) .box-content img,
    &:nth-child(1) .box-content video,
    &:nth-child(1) .box-content .image-stroke {
        animation-delay: 0s !important;
    }

    &:nth-child(2) .box-content img,
    &:nth-child(2) .box-content video,
    &:nth-child(2) .box-content .image-stroke {
        animation-delay: 0.15s !important;
    }

    &:nth-child(3) .box-content img,
    &:nth-child(3) .box-content video,
    &:nth-child(3) .box-content .image-stroke {
        animation-delay: 0.3s !important;
    }

    &:nth-child(4) .box-content img,
    &:nth-child(4) .box-content video,
    &:nth-child(4) .box-content .image-stroke {
        animation-delay: 0.45s !important;
    }

    &:nth-child(5) .box-content img,
    &:nth-child(5) .box-content video,
    &:nth-child(5) .box-content .image-stroke {
        animation-delay: 0.6s !important;
    }

    &:nth-child(6) .box-content img,
    &:nth-child(6) .box-content video,
    &:nth-child(6) .box-content .image-stroke {
        animation-delay: 0.75s !important;
    }
}

.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-29);
    }

    .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-29);
    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);
        }
    }

}