.logo-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 8px;
            margin-bottom: 16px;
            min-height: 100px;
        }

        .logo-cell img {
            max-width: 70%;
            max-height: 60px;
            width: auto;
            height: auto;
            object-fit: contain;
            filter: grayscale(1) contrast(0.9);
            opacity: 0.85;
            transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
        }

        .logo-cell:hover img {
            filter: grayscale(0);
            opacity: 1;
            transform: scale(1.04);
        }

        /* logos whose brand colour is so light it disappears in grayscale —
               force them to a solid dark grey; still allow the hover scale so
               the cell reads as interactive */
        .logo-cell.force-dark img,
        .logo-cell.force-dark:hover img {
            filter: brightness(0) invert(0.25);
            opacity: 1;
        }

        .logo-cell.force-dark:hover img {
            transform: scale(1.04);
        }

        /* below the Bootstrap md breakpoint (768px), give logos more room */
        @media (max-width: 767.98px) {
            .logo-cell img {
                max-width: 85%;
            }
        }