/***************************************
* Small icon boxes
****************************************/
.vii-small-icon-boxes {
    --grid-gap-x:16px;
    --grid-gap-y:16px;
    --item-gap:12px;
    --icon-size:42px;

    max-width:1062px;
}
.vii-small-icon-boxes.layout-inline {padding:24px;}
.vii-small-icon-boxes.layout-grid {--item-gap:24px;}

/* item */
.vii-small-icon-boxes__item {
    padding:16px;
    border-radius:8px;
    border:1px solid var(--vii-color-light-gold);
    gap:var(--item-gap);
}

/* image, icon */
.vii-small-icon-boxes__item-image {
    width:var(--icon-size);height:var(--icon-size);min-width:var(--icon-size);
    box-shadow:0px 4px 12px rgba(0, 0, 0, 0.08), inset 0px 1px 0px rgba(255, 255, 255, 0.45);
}
.vii-small-icon-boxes__item-image:has( > [class*="icon"]) {font-size:22px;}
.vii-small-icon-boxes__item-heading + .vii-small-icon-boxes__item-description {margin-top:8px;}


/***************************************
* Small icon boxes responsive
****************************************/
@media only screen and (min-width:1700px) {
    .vii-small-icon-boxes {
        --grid-gap-x:20px;
        --grid-gap-y:20px;
        --icon-size:56px;

        max-width:82.97%;
    }
}
@media only screen and (max-width:1024px) {
    .vii-small-icon-boxes {
        --grid-gap-x:var(--vii-gap-container);
        --grid-gap-y:var(--vii-gap-container);
    }
    .vii-small-icon-boxes.layout-inline {padding:0;}
    .vii-small-icon-boxes.layout-grid {--item-gap:var(--vii-gap-container);}
}