/*********************************************
 * Content Box
**********************************************/
.vii-content-box__inner {
    --btn-icon-size:55px;
    --btn-icon-fs:18px;
    --btn-icon-color:var(--vii-color-primary);
    --btn-icon-bg:transparent;
    --box-icon-size:80px;
    --box-icon-fs:56px;
    --context-box-radius:16px;

    border-radius:var(--context-box-radius);
    padding:20px 26px 30px 26px;
}

.vii-content-box__icon {
    transform:translate(-50%, -50%);
}
.vii-content-box__icon.type-img {width:var(--box-icon-size);height:var(--box-icon-size);}
.vii-content-box__icon.type-icon {font-size:var(--box-icon-fs);}
.vii-content-box__icon-button {
    width:var(--btn-icon-size);height:var(--btn-icon-size);
    color:var(--btn-icon-color);font-size:var(--btn-icon-fs);
    border:1px solid var(--vii-color-primary);background-color:var(--btn-icon-bg);
    right:26px;
}

a.vii-content-box__inner:is(:hover, :focus) {
    --btn-icon-color:var(--vii-color-white);
    --btn-icon-bg:var(--vii-color-primary);
    border-radius:var(--context-box-radius);
}


/*********************************************
 * Content Box - Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .vii-content-box__inner {
        --btn-icon-size:42px;
        --btn-icon-fs:16px;
        --box-icon-size:64px;
        --box-icon-fs:42px;

        padding:20px var(--vii-gap-container) 30px var(--vii-gap-container);
    }
    .vii-content-box__icon-button {
        right:var(--vii-gap-container);
    }
}