.frame-box-parent-wrapper-container{
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-xl);
}
.frame-box-item{
    position: relative;
    display: flex;
}

.frame-box-item.left-to-right{
    justify-content: flex-end;
}
.frame-box-item.right-to-left{
    justify-content: flex-start;
}
.framebox-description{

    font-size: 20px;
    line-height: 34px;
    font-family: var(--klavika-regular);
    max-width: 647px;

}

.frame-box-item-text {

    padding: var(--spacing-ml);
    max-width: 872px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.frame-box-item-text.framebox-with-long-text {
    transform: unset;
    top: -96px;
}

.frame-box-item.framebox-with-long-text-wrapper{

    margin-top: calc(var(--spacing-xl) * 2) !important;

}
.frame-box-item.framebox-with-long-text-wrapper:first-child{

    margin-top: 0 !important;


}


.frame-box-item.left-to-right .frame-box-item-text{
    left: 204px;
}
.frame-box-item.right-to-left .frame-box-item-text{
    right: 198px;
}

/*.hide_mobile_up, .hide_mobile{*/
/*    display: none;*/
/*}*/
.frame-box-title{
    hyphens: auto;
    -webkit-hyphens: auto;
}

.frame-box-item:last-child {
    margin-bottom: 0 !important;
}

@media (min-width: 481px) {
    .hide_mobile_up{
        display: none;
    }
}
@media (max-width: 480px) {

    .frame-box-parent-wrapper{
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .frame-box-parent-wrapper-container {
        display: flex;
        flex-direction: column;
         padding-top: 0;
    }

    .hide_mobile{
        display: none;
    }

    .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .frame-box-item-text {
        padding: var(--spacing-ml);
        position: relative;
        top: unset;
        transform: unset;

        left: unset !important;
        right: unset !important;
        max-width: calc(100vw - 72px);
        margin: auto;

    }

    .frame-box-item-image {
        max-width: calc(100vw - 72px - 78px);
        margin-top: -48px;
    }
    .frame-box-item.left-to-right {
        justify-content: flex-end;
        align-items: flex-end;
    }
    .frame-box-item.right-to-left {
        justify-content: flex-end;
        align-items: flex-start;
    }

    .frame-box-item-text.framebox-with-long-text {
        transform: unset;
         top: 0;
    }
    .frame-box-item.framebox-with-long-text-wrapper {
        margin-top: 48px !important;
    }
}

@media (min-width: 481px) and (max-width: 850px) {

    .frame-box-parent-wrapper{
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .frame-box-item-image .hide_mobile{
        display: none;
    }

    .frame-box-item-image .hide_mobile_up{
        display: block;
    }

    .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 196px !important;
    }

    .frame-box-item:last-child {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important;
    }

    .frame-box-item-text {
        padding: var(--spacing-ml);
        /* position: unset; */
        top: -96px;
        transform: unset;
        /* left: unset !important; */
        /* right: unset !important; */
        max-width: 499px;
        margin: unset;
    }
    .frame-box-item.left-to-right .frame-box-item-text {
        left: 204px;
    }
    .frame-box-item-image {
        max-width: 409px;
        margin-top: 0;
    }
    .frame-box-item.left-to-right {
        justify-content: flex-end;
        align-items: flex-end;
    }
    .frame-box-item.right-to-left {
        justify-content: flex-end;
        align-items: flex-start;
    }


    .frame-box-item.left-to-right .frame-box-item-text {
        left: 80px;
    }
    .frame-box-item.right-to-left .frame-box-item-text {
        right: 80px;
    }

    .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
    }


    .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .framebox-with-long-text-wrapper.frame-box-item{
        justify-content: unset;
        align-items: unset;
    }
    .framebox-with-long-text-wrapper .frame-box-item-image {
             width: 100%;
             max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
     }
    .framebox-with-long-text-wrapper .frame-box-item-image img{
             max-width: 409px;
             margin-top: -96px;
         }

    .frame-box-item:first-child {

        margin-top: 96px;
    }



    .havingLongTextFrames  .frame-box-parent-wrapper{
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .frame-box-item-image .hide_mobile{
        display: none;
    }

    .frame-box-item-image .hide_mobile_up{
        display: block;
    }

    .havingLongTextFrames .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 96px !important;
    }

    .havingLongTextFrames .frame-box-item:last-child {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important;
    }

    .havingLongTextFrames .frame-box-item-text {
        padding: var(--spacing-ml);
        position: unset;
        top: -96px;
        transform: unset;
        /* left: unset !important; */
        /* right: unset !important; */
        max-width: 409px;
        margin: unset;
    }
    .havingLongTextFrames .frame-box-item.left-to-right .frame-box-item-text {
        left: 204px;
    }
    .havingLongTextFrames .frame-box-item-image {
        max-width: 100%;
        margin-top: 0;
        display: block;
        /* float: right; */
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
        margin-top: -96px;
        z-index: 0;
    }
    .havingLongTextFrames .frame-box-item.left-to-right {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    .havingLongTextFrames .frame-box-item.right-to-left {
        justify-content: flex-end;
        align-items: flex-start;
        flex-direction: column;
    }


    .havingLongTextFrames .frame-box-item.left-to-right .frame-box-item-text {
        left: 0;
        margin-left: 80px;
        z-index: 1;
    }
    .havingLongTextFrames .frame-box-item.right-to-left .frame-box-item-text {
        right: 0;
        margin-right: 80px;
        margin-top: 0;
        z-index: 1;
    }

    .havingLongTextFrames .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
    }


    .havingLongTextFrames .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .havingLongTextFrames .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper.frame-box-item{
        justify-content: flex-start;
        align-items: flex-end;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image img{
        max-width: 409px;
        margin-top: -96px;
    }

    .havingLongTextFrames .frame-box-item:first-child {

        margin-top: 0;
    }

    .havingLongTextFrames .frame-box-item.framebox-with-long-text-wrapper {
        margin-top: 0 !important;
        flex-direction: column-reverse;
    }

    .havingLongTextFrames .frame-box-item.framebox-with-long-text-wrapper:first-child {
        margin-top: 0 !important;
        flex-direction: column;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 0;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image img {
        max-width: 409px;
        margin-top: 0;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper:first-child .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        margin-top: -96px;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper.frame-box-item:first-child {
        justify-content: flex-end;
        align-items: flex-start;
    }

    .frame-box-parent-wrapper-container {
        display: flex;
        flex-direction: column;
         padding-top: 0;
    }



    /* framebox-overrides */

    .frame-box-parent-wrapper{
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /*.frame-box-item-image .hide_mobile{*/
    /*    display: none;*/
    /*}*/

    /*.frame-box-item-image .hide_mobile{*/
    /*    display: none;*/
    /*}*/

    /*.frame-box-item-image .hide_mobile_up{*/
    /*    display: none;*/
    /*}*/

    .havingLongTextFrames .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 196px !important;
    }


    .havingLongTextFrames .frame-box-item:last-child {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important;
    }

    .havingLongTextFrames .frame-box-item-text {
        padding: var(--spacing-ml);
        /* position: unset; */
        top: -96px;
        transform: unset;
        /* left: unset !important; */
        /* right: unset !important; */
        max-width: 50%;
        margin: unset;
    }
    .havingLongTextFrames .frame-box-item.left-to-right .frame-box-item-text {
        left: 204px;
    }
    .havingLongTextFrames .frame-box-item-image {
        max-width: 75%;
        margin-top: 0;
    }
    .havingLongTextFrames .frame-box-item.left-to-right {
        justify-content: flex-end;
        align-items: flex-end;
    }
    .havingLongTextFrames .frame-box-item.right-to-left {
        justify-content: flex-end;
        align-items: flex-start;
    }


    .havingLongTextFrames .frame-box-item.left-to-right .frame-box-item-text {
        left: 80px;
    }
    .havingLongTextFrames .frame-box-item.right-to-left .frame-box-item-text {
        right: 80px;
    }

    .havingLongTextFrames .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
    }


    .havingLongTextFrames .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .havingLongTextFrames .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper.frame-box-item{
        justify-content: unset;
        align-items: unset;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: end;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image img{
        max-width: 52%;
        margin-top: -180px;
    }

    .havingLongTextFrames .frame-box-item:first-child {

        margin-top: 96px;
    }



    .havingLongTextFrames  .frame-box-parent-wrapper{
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /*.frame-box-item-image .hide_mobile{*/
    /*    display: block;*/
    /*}*/

    /*.frame-box-item-image .hide_mobile_up{*/
    /*    display: none;*/
    /*}*/




    .havingLongTextFrames .frame-box-item-image .hide_mobile{
        max-width: 70%;
    }

    .havingLongTextFrames .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 96px !important;
    }

    .havingLongTextFrames .frame-box-item:last-child {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important;
    }

    .havingLongTextFrames .frame-box-item-text {
        padding: var(--spacing-ml);
        position: unset;
        top: -96px;
        transform: unset;
        /* left: unset !important; */
        /* right: unset !important; */
        max-width: 60%;
        margin: unset;
    }
    .havingLongTextFrames .frame-box-item.left-to-right .frame-box-item-text {
        left: 204px;
    }
    .havingLongTextFrames .frame-box-item-image {
        max-width: 100%;
        margin-top: 0;
        display: block;
        /* float: right; */
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        margin-top: -80px;
        z-index: 0;
    }

    .havingLongTextFrames .frame-box-item.right-to-left .frame-box-item-image {
        align-items: flex-end;
        justify-content: start;

    }
    .havingLongTextFrames .frame-box-item.left-to-right {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    .havingLongTextFrames .frame-box-item.right-to-left {
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;
    }


    .havingLongTextFrames .frame-box-item.left-to-right .frame-box-item-text {
        left: 0;
        margin-left: 80px;
        z-index: 1;
    }
    .havingLongTextFrames .frame-box-item.right-to-left .frame-box-item-text {
        right: 0;
        margin-right: 80px;
        margin-top: 0;
        z-index: 1;
    }

    .havingLongTextFrames .frame-box-item {
        position: relative;
        display: flex;
        flex-direction: column;
    }


    .havingLongTextFrames .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .havingLongTextFrames .frame-box-item-text.framebox-with-long-text {
        position: relative;
        margin-top: 0;
        top: 0;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper.frame-box-item{
        justify-content: flex-start;
        align-items: flex-end;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image img{
        max-width: 409px;
        margin-top: -96px;
    }

    .havingLongTextFrames .frame-box-item:first-child {

        margin-top: 0;
    }

    .havingLongTextFrames .frame-box-item.framebox-with-long-text-wrapper {
        margin-top: 0 !important;
        flex-direction: column-reverse;
    }

    .havingLongTextFrames .frame-box-item.framebox-with-long-text-wrapper:first-child {
        margin-top: 0 !important;
        flex-direction: column;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 0;
    }
    .havingLongTextFrames .framebox-with-long-text-wrapper .frame-box-item-image img {
        max-width: 50%;
        margin-top: 0;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper:first-child .frame-box-item-image {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        margin-top: -96px;
    }

    .havingLongTextFrames .framebox-with-long-text-wrapper.frame-box-item:first-child {
        justify-content: flex-end;
        align-items: flex-start;
    }

    /*.frame-box-parent-wrapper-container {*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    padding-top: 0;*/
    /*}*/


    /* Framebox ended */


}