/*********************************************
 * Image with Content
**********************************************/
/*general*/
.vii-image-content {
    --ic-spacing-text-image:60px;
    --ic-size-btn:150px;
    --ic-size-icon:24px;
    --ic-btn-cutoff:35px;
    --ic-position-btn-y:70px;
    --ic-position-btn-x:100px;
}

/* image */
.vii-image-content__carousel-slide {width:100%; padding-top:64.3%;}

/* image position */
.image-left .vii-image-content__inner {flex-direction:row-reverse;}

/*option layout*/
.vii-image-content__col.content {width:34%; padding-right:var(--ic-spacing-text-image);}
.vii-image-content:not(.has-button) .vii-image-content__col.content {padding-top:35px; position:relative;}
.vii-image-content:not(.has-button) .vii-image-content__col.content:before {
    content:""; display:block;
    width:calc(100% - 20px); height:2px; background:var(--vii-color-neutral-200);
    position:absolute; top:-2px; left:0;
}
.vii-image-content__col.image {width:66%;}

/*has slider*/
.vii-image-content__carousel .flickity-button {--flkt-position:25px;}

/* option has button */
.vii-image-content.has-button .vii-image-content__col.content {
    width:46%; padding-left:calc(var(--ic-spacing-text-image) + 10px);
}
.vii-image-content.has-button .vii-image-content__col.image {
    width:54%; padding-bottom:var(--ic-position-btn-y);
    position:relative;
}
.vii-image-content__button {
    position:absolute; bottom:0; right:var(--ic-position-btn-y);
    transition:var(--vii-transition);
}
.vii-image-content__button a {
    width:var(--ic-size-btn); height:var(--ic-size-btn); background:var(--vii-color-primary);
    padding:10px 10px 18px 20px; position:relative; overflow:hidden;
    display:flex; align-items:flex-end;
    transition:var(--vii-transition);
}
.vii-image-content__button a span {
    color:#fff; line-height:1.15; font-size:var(--vii-size-14); text-transform:uppercase;
    font-weight:700; max-width:70px;
    position:relative; z-index:3;
}
.vii-image-content__button a i {
    display:block;
    font-size:var(--ic-size-icon); line-height:1; color:#fff;
    position:absolute; top:10px; right:10px; z-index:3;
    transform:rotate(45deg); transition:var(--vii-transition);
}
.vii-image-content__button a:before, .vii-image-content__button a:after {
    display:block; content:""; z-index:2;
    position:absolute; transition:var(--vii-transition);
}
.vii-image-content__button a:before {
    width:var(--ic-btn-cutoff); height:var(--ic-btn-cutoff); background:#fff;
    right:calc(-1 * var(--ic-btn-cutoff) / 2); bottom:calc(-1 * var(--ic-btn-cutoff) / 2);
    transform:rotate(45deg);
}
.vii-image-content__button a:after {
    width:100%; height:100%; background:#000;
    top:50%; left:50%; transform:translate(-50%, -50%) scale(0);
    z-index:1;
}
.vii-image-content__button:hover {bottom:calc(var(--ic-size-btn) * .05); right:calc(var(--ic-size-btn) * .05 + var(--ic-position-btn-y));}
.vii-image-content__button a:hover {--ic-size-btn:135px;}
.vii-image-content__button a:hover:after {transform:translate(-50%, -50%) scale(1.1);}
.vii-image-content__button a:hover i {transform:scale(.9) rotate(90deg);}

/*button mobile*/
.vii-image-content__button-mobile {padding-top:25px;}

/*********************************************
 * Image with Content Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-image-content {
        --ic-spacing-text-image:var(--vii-gap-container);
        --ic-size-btn:120px;
        --ic-size-icon:20px;
        --ic-btn-cutoff:20px;
        --ic-position-btn-y:40px;
        --ic-position-btn-x:var(--vii-gap-container);
    }
    .vii-image-content__carousel-slide {padding-top:60%;}

    /*option layout*/
    .vii-image-content:not(.has-button) .vii-image-content__col.content {padding-top:25px;}

    /*button*/
    .vii-image-content__button a:hover {--ic-size-btn:108px;}
}
@media only screen and (max-width:1024px) {
    .vii-image-content {
        --ic-size-btn:80px;
        --ic-size-icon:15px;
        --ic-btn-cutoff:15px;
    }
    .vii-image-content__button a {padding:10px;}
    /*button*/
    .vii-image-content__button a:hover {--ic-size-btn:72px;}
}
@media only screen and (max-width:768px) {
    .vii-image-content {
        --ic-position-btn-y:0px;
        --ic-position-btn-x:0px;
        --ic-size-icon:15px;
    }
    .vii-image-content__inner {flex-direction:column-reverse !important;}
    .vii-image-content__col {width:100% !important; padding:0 !important;}
    .vii-image-content__col.image {margin-bottom:25px;}
    .vii-image-content__col.content:before {opacity:0;}
    .vii-image-content__carousel-slide {padding-top:50%;}

    /*has slider*/
    .vii-image-content__carousel .flickity-button {--flkt-position:10px;}

    /*option has button*/
    .vii-image-content__button, .vii-image-content__button:hover {left:0; right:auto; bottom:0;}
    .vii-image-content__button a {
        clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--ic-btn-cutoff)), calc(100% - var(--ic-btn-cutoff)) 100%, 0 100%);
    }
    .vii-image-content__button a:before {display:none;}
    .vii-image-content__button a:hover {--ic-size-btn:80px;}

    /*option no slider*/
    .vii-image-content:not(.has-button) .vii-image-content__inner {flex-direction:column !important;}
    .vii-image-content:not(.has-button) .vii-image-content__col.content {margin-bottom:25px;}
    .vii-image-content:not(.has-button) .vii-image-content__col.image {margin-bottom:0;}
}

@media only screen and (max-width:480px) {
    .vii-image-content, .vii-image-content__button a:hover {--ic-size-btn:70px;}
    .vii-image-content__carousel-slide {padding-top:70%;}

    /*button*/
    .vii-image-content__button a {padding:5px;}
    .vii-image-content__button a i {top:5px; right:5px;}
}