#cooperations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem 6rem;
    margin: 0 6vw;
    align-items: center;
    justify-items: center;
}

.cooperation-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cooperation-logo-wrap img {
    max-width: 180px;
    max-height: 100px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(30%);
    transition: filter 0.2s ease;
}

/* BBGM logo is very wide and flat — needs more height */
.cooperation-logo-wrap.logo-bbgm img {
    max-width: 240px;
    max-height: 140px;
}

/* ZEGD logo is wide and tends to render too large */
.cooperation-logo-wrap.logo-zegd img {
    max-width: 130px;
    max-height: 68px;
}

/* KönigsKinder logo is nearly square — needs more height */
.cooperation-logo-wrap.logo-koenigskinder img {
    max-width: 180px;
    max-height: 180px;
}

@media (hover: hover) {
    .cooperation-logo-wrap img:hover {
        filter: grayscale(0%);
    }
}

@media (max-width: 834px) {
    #cooperations-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        margin: 0 4vw;
    }
}

@media (max-width: 524px) {
    #cooperations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
        margin: 0 2vw;
    }

    .cooperation-logo-wrap img {
        max-width: 130px;
        max-height: 75px;
    }
}