.partner {
    text-align: center;
    display: block;
    box-shadow: none;
    max-width: 120px;
    margin: auto;

    &:hover,
    &:focus {
        background: none;

        .partner__logo {
            fill: $brand-main-green;
            fill-opacity: 1;
        }
    }
}


//
// All logos
//
.partner__logo {
    @include transition;
    fill: $brand-main-blue-light;
    fill-opacity: .6;
    max-width: 100%;
    height: 20px; // need to hardcode some size to overwrite browser's default 150px height for SVGs

    @media ($screen-sm) {
        height: 30px;
    }
}


//
// Visual weight tweaks
//
// using transforms so we don't affect layout
// or have to hardcode any sizes
//
.partner__logo--ipdb {
    transform: scale(1.2);
}

.partner__logo--interledger {
    transform: scale(1.2);
}

.partner__logo--rethinkdb {
    transform: translateY(.4rem);
}

.partner__logo--mongodb {
    transform: translateY(.3rem);
}

.partner__logo--innogy {
    transform: scale(1.5);

    .stroke {
        fill: none;
        stroke: $brand-main-blue-light;
        stroke-width: 4px;
    }
}

.partner__logo--porsche {
    @media ($screen-sm) {
        transform: scale(1.3);
        transform-origin: top center;
    }
}

.partner__logo--volkswagen {
    transform: scale(1.1);
}