/***************************************
* Logo grid
****************************************/
.vii-logo-grid {container:logo-grid/inline-size}
.vii-logo-grid__items {
    --grid-col:5;
    --grid-gap-x:24px;
    --grid-gap-y:24px;
}
.vii-logo-grid__item {
    aspect-ratio:190/138; border:1px solid var(--vii-color-light-gray-5);
    padding:24px 16px;background-color:var(--vii-color-light-gray);
}
.vii-logo-grid__item img {mix-blend-mode:multiply; max-width:200px; transition:transform .5s ease;}

/* logo has link */
.vii-logo-grid__item a:hover img, .vii-logo-grid__item a:focus img {transform:scale(1.05);}

/* vc has background color */
.vii-bg-tertiary .vii-logo-grid__item,
.vii-bg-light-gray .vii-logo-grid__item {background-color:var(--vii-color-white);}

/***************************************
* Responsive Logo grid
****************************************/
@container logo-grid (max-width:1280px) {
    .vii-logo-grid__items {--grid-col:4;}
}
@container logo-grid (max-width:768px) {
    .vii-logo-grid__items {
        --grid-col:3;
        --grid-gap-x:var(--vii-gap-container);
        --grid-gap-y:var(--grid-gap-x);
    }
}
@container logo-grid (max-width:480px) {
    .vii-logo-grid__items {
        --grid-col:2;
        --grid-gap-x:10px;
    }
    .vii-logo-grid__item {padding:12px;}
}