/*********************************************
 * Image with Content
/***********************************************!*/
.vii-image-content {
    --item-img-w:46.41%;
    --item-content-w:53.59%;
    --content-width:665px;
}
.vii-image-content__col.image {width:var(--item-img-w);}
.vii-image-content__col.content {width:var(--item-content-w);}
.vii-image-content__content {max-width:var(--content-width);}

/* layout-side-image */
.vii-image-content.layout-side-image {
    --item-img-w:50%;
    --item-content-w:50%;
    --content-width:527px;
}

/* layout-stacked */
.vii-image-content.layout-stacked {
    --item-content-w:clamp(400px, 37.3vw, 532px);
    --item-img-w:calc(100% - var(--item-content-w));
    --content-width:clamp(400px, 37.3vw, 532px);
}
.vii-image-content.layout-stacked .vii-image-content__inner {min-height:600px;}
.image-position-left.layout-stacked .vii-image-content__col.content {padding-left:0;}

/* layout-small-image-large-content */
.vii-image-content.layout-small-image-large-content {
    --item-content-w:calc(100% - var(--item-img-w));
    --content-width:100%;
}
.vii-image-content.layout-small-image-large-content .vii-image-content__image {aspect-ratio:410/552;}


/*********************************************
 * Image position
**********************************************/
@media only screen and (min-width:769px) {
    /* layout side image */
    .vii-image-content.layout-side-image .vii-image-content__inner {
        justify-content:space-between;align-items:flex-start;
    }

    /* layout-stacked */
    .vii-image-content.layout-stacked.image-position-left {padding-right:var(--vii-gap-side);}
    .vii-image-content.layout-stacked.image-position-right {padding-left:var(--vii-gap-side);}
    .vii-image-content.layout-stacked .vii-image-content__inner {
        align-items:flex-end;
    }
    .vii-image-content.layout-stacked .vii-image-content__image {
        position:absolute;
        bottom:0;right:0;
        width:100%;aspect-ratio:1440/600;
    }
    .vii-image-content.layout-stacked.image-position-left .vii-image-content__image {
        left:0; right:unset;
    }
    .vii-image-content.layout-stacked .vii-image-content__image img {object-position:bottom right;}

    /* Image position left */
    .image-position-left .vii-image-content__col.content {padding-left:var(--vii-gap-container);}
    .image-position-left .vii-image-content__content {margin-left:auto;}

    /* Image position right */
    .image-position-right .vii-image-content__col.image {padding-left:var(--vii-gap-container);}
    .image-position-right .vii-image-content__inner {flex-direction:row-reverse;}

    /* layout-small-image-large-content */
    .vii-image-content.layout-small-image-large-content {--item-img-w:40%;}
    .vii-image-content.layout-small-image-large-content .vii-image-content__col.image {padding:0;}
    .vii-image-content.layout-small-image-large-content.image-position-right .vii-image-content__col.content {padding-right:var(--vii-gap-container);}
}
@media only screen and (min-width:1024px) {
    .vii-image-content.layout-small-image-large-content {
        --item-img-w:32%;
    }
    .vii-image-content.layout-small-image-large-content.image-position-left .vii-image-content__col.content {padding-left:120px;}
    .vii-image-content.layout-small-image-large-content.image-position-right .vii-image-content__col.content {padding-right:120px;}
}
@media only screen and (min-width:1181px) {
    .vii-image-content.image-position-right.layout-side-image {margin-right:calc(var(--vii-gap-container) - var(--vii-gap-side));}
    .vii-image-content.image-position-left.layout-side-image {margin-left:calc(var(--vii-gap-container) - var(--vii-gap-side));}
}
@media only screen and (min-width:1700px) {
    .vii-image-content {--content-width:37.5vw;}
    .vii-image-content.layout-side-image {
        --content-width:30.5vw;
        --item-img-w:55%;
        --item-content-w:45%;
    }
    .vii-image-content.layout-stacked {
        --item-content-w:33.33vw;
        --content-width:33.33vw;
    }
    .vii-image-content.layout-stacked .vii-image-content__inner {
        min-height:calc((var(--vii-100vw) - var(--vii-gap-side)) * 600 / 1440);
    }
    .vii-image-content.layout-stacked .vii-image-content__col.content {transform:translateY(-4vw);}

    /* layout-small-image-large-content */
    .vii-image-content.layout-small-image-large-content {--item-img-w:25%;}
}

/*********************************************
 * Responsive
**********************************************/
@media only screen and (max-width:768px) {
    .vii-image-content {--content-width:100% !important;}
    .vii-image-content__col.image,
    .vii-image-content__col.content {width:100%;}

    .vii-image-content__col.image {margin-bottom:var(--vii-spacing-32);}
    .vii-image-content__col.content {text-align:center;}

    /* center block with max-width */
    .vii-image-content__image {max-width:520px;}
    .vii-image-content__image,
    .vii-image-content__content {margin-left:auto; margin-right:auto;}

    /* image position on mobile */
    .vii-image-content.img-position-mobile-bottom .vii-image-content__col.image {order:1; margin-bottom:0;}
    .vii-image-content.img-position-mobile-bottom .vii-image-content__col.content {margin-bottom:var(--vii-spacing-32);}

    /* layout-stacked */
    .vii-image-content.layout-stacked.image-position-right .vii-image-content__col.image {
        transform:translateX(-40%);
    }
    .vii-image-content.layout-stacked .vii-image-content__col.content {
        padding-left:var(--vii-gap-container);
        padding-right:var(--vii-gap-container);
    }
    .vii-image-content.layout-stacked .vii-image-content__inner {min-height:auto; overflow:hidden}
    .vii-image-content.layout-stacked .vii-image-content__image {max-width:140%;width:140%;}

    /* layout-small-image-large-content */
    .vii-image-content.layout-small-image-large-content .vii-image-content__image {max-width:380px;}
}
@media only screen and (max-width:480px) {
    .vii-image-content.layout-small-image-large-content .vii-image-content__image {max-width:unset;}
}