/***************************************
* Step process grid
****************************************/
.vii-step-process-grid {
    --grid-gap-x:24px;
    --grid-gap-y:24px;
    --step-offset:32px;
    --step-size:48px;
    --icon-size:100px;
    --item-shadow:var(--vii-box-shadow-1);
}
.vii-step-process-grid__item {
    padding:32px 24px;
    box-shadow:var(--item-shadow);
}
.vii-step-process-grid__item-content-wrapper {gap:24px;}
.vii-step-process-grid__item-content {
    padding:0 16px;
}
.vii-step-process-grid__item-number-wrap {
    top:calc(-1 * (var(--step-size) + var(--step-offset)));
}
.vii-step-process-grid__item-number {
    width:var(--step-size);
    box-shadow:inset 1px 1px 1px #fff, inset -1px 0 .6px rgba(0, 0, 0, 0.25);
}
.vii-step-process-grid__item-image {width:var(--icon-size);height:var(--icon-size);}
.vii-step-process-grid__item-image:has( > [class*="icon"]) {
    font-size:var(--icon-size);
}


/***************************************
* Step process grid responsive
****************************************/
@media only screen and (min-width:1700px) {
    .vii-step-process-grid {
        --step-offset:40px;
        --step-size:56px;
        --icon-size:4.9vw;
    }
}
@media only screen and (min-width:769px) {
    .vii-step-process-grid {
        --grid-col:3;

        padding-top:calc(var(--step-size) + var(--step-offset));
    }
    .vii-step-process-grid.single-item {padding-top:0;}
    .vii-step-process-grid__item:first-child::before {
        content:"";
        display:block;
        height:2px;

        /* width goes from first to last item. */
        width:calc((var(--vii-count-items, 1) - 1) * (100% + var(--grid-gap-x)));
        background:var(--vii-color-linear-gold);
        position:absolute;
        top:calc(-1 * ((var(--step-size) / 2) + var(--step-offset)));
        left:50%;
    }
    .vii-step-process-grid__item:only-child::before {content:unset;}
}
@media only screen and (max-width:1024px) {
    .vii-step-process-grid {
        --grid-gap-x:var(--vii-gap-container);
        --grid-gap-y:var(--vii-gap-container);
        --step-offset:28px;
        --step-size:40px;
        --icon-size:65px;
    }
    .vii-step-process-grid:not(.has-3-items) {
        --grid-col:2;
    }
    .vii-step-process-grid__item {
        padding:32px var(--vii-gap-container);
    }
    .vii-step-process-grid__item-heading,
    .vii-step-process-grid__item-content {
        margin-top:var(--vii-gap-container);
    }
}
@media only screen and (max-width:768px) {
    .vii-step-process-grid,
    .vii-step-process-grid:not(.has-3-items) {
        --grid-col:1;
        --item-shadow:var(--vii-box-shadow-3);
    }
    .vii-step-process-grid__item {
        max-width:clamp(410px, 80%, 580px);
        padding:var(--vii-gap-container);
    }
}