/*********************************************
 * Logo Grid
**********************************************/
.vii-logo-grid__items.flex-grid-template {
    --grid-gap-x:32px;
    --grid-gap-y:20px;
    --grid-col:4;
}
.vii-logo-grid__items-container {container:logo-grid / inline-size;}

/* default layout */
.vii-logo-grid.layout-default .vii-logo-grid__inner,
.vii-logo-slider__inner {max-width:1100px; margin-left:auto; margin-right:auto;}

/* logo item */
.vii-logo-grid__item__image {aspect-ratio:240/110; filter:grayscale(1); padding:10px;}
.vii-logo-grid.layout-default .vii-logo-grid__item__image {padding:20px;}

/* clickable logo */
a.vii-logo-grid__item__image:hover {opacity:.8;}

/*********************************************
 * Logo Grid Responsive
**********************************************/
@container logo-grid (max-width:1024px) {
    .vii-logo-grid.layout-default .vii-logo-grid__item__image {padding:6px;}
}
@container logo-grid (max-width:600px) {
    .vii-logo-grid__items.flex-grid-template {
        --grid-gap-x:30px;
        --grid-gap-y:20px;
        --grid-col:3;
    }


}
@container logo-grid (max-width:460px) {
    .vii-logo-grid__items.flex-grid-template {
        --grid-gap-x:20px;
        --grid-col:2;
    }
}


/*********************************************
 * Logo Grid layout decorations
**********************************************/
.layout-has-decorations {
    container:logo-grid-decorations / inline-size;
}
.layout-has-decorations .vii-logo-grid__inner {
    --grid-gap-x:var(--vii-gap-vc-column);
    --grid-col:2;
}
.layout-has-decorations .vii-logo-grid__heading {
    max-width:450px; margin-left:auto; margin-right:auto;
    padding-top:80px;
}
.vii-logo-grid__small-right-image {margin-top:120px; width:clamp(300px, 65%, 100%); margin-left:auto;}

@container logo-grid-decorations (max-width:1023px) {
    .vii-logo-grid__small-right-image {display:none;}
    .layout-has-decorations .vii-logo-grid__inner {
        --grid-col:1;
    }
    .layout-has-decorations .vii-logo-grid__heading {padding-top:0;}
    .vii-logo-grid__big-left-image {margin-left:auto; margin-right:auto; max-width:768px;}
}