/* Widget: Brand logos */

.cpx-brands {
    --cpx-brands-columns: 6;
    --cpx-brands-gap: 2.5rem;
    --cpx-brands-cell-height: 72px;
    --cpx-brands-logo-max-width: 130px;

    width: 100%;
}

.cpx-brands__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--cpx-brands-gap);
    row-gap: calc(var(--cpx-brands-gap) * 1.5);

    margin: 0;
    padding: 0;

    list-style: none;
}

.cpx-brands__item {
    display: flex;
    justify-content: center;
    align-items: center;

    /* 6 per rij: trek de gaps van de volledige rij af, deel door kolommen. */
    flex: 0 0 calc((100% - (var(--cpx-brands-columns) - 1) * var(--cpx-brands-gap)) / var(--cpx-brands-columns));

    height: var(--cpx-brands-cell-height);
}

.cpx-brands__logo {
    width: auto;
    height: auto;
    max-width: min(100%, var(--cpx-brands-logo-max-width)) !important;

    /* Vaste cel-hoogte + contain laat vierkant en breed even groot ogen. */
    max-height: 100%;

    object-fit: contain;
}

/* Responsive: minder kolommen op smallere schermen. */
@media (max-width: 1024px) {
    .cpx-brands {
        --cpx-brands-columns: 4;
        --cpx-brands-gap: 2rem;
    }
}

@media (max-width: 768px) {
    .cpx-brands {
        --cpx-brands-columns: 3;
        --cpx-brands-gap: 1.75rem;
    }
}

@media (max-width: 480px) {
    .cpx-brands {
        --cpx-brands-columns: 2;
        --cpx-brands-gap: 1.5rem;
    }
}