.caretakers {
    margin-top: $spacer;
    margin-bottom: $spacer;
    max-width: 100%;
}

.caretaker {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    max-width: 130px;
    margin: auto;
    height: 100%;
    transition: .25s ease-out;

    &:hover,
    &:focus {
        .logo-caretaker {
            fill: $link-color;
            color: $link-color;
        }

        .caretaker__name {
            color: $link-color;
        }
    }
}

.logo-caretaker {
    fill: $brand-04;
    color: $brand-04;
    max-width: 100%;
    height: 1.5rem; // need to hardcode some size to overwrite browser's default 150px height for SVGs
    transition: .25s ease-out;

    @media ($screen-sm) {
        height: auto;
        max-height: 2.2rem;
    }
}

.logo-caretaker--internet-archive {
    transform: scale(1.5);
}

.logo-caretaker--human-data-commons-foundation {
    transform: scale(1.3);
}

//
// The logo fallback
//
.caretaker__name {
    font-size: $font-size-base;
    color: $brand-04;
    vertical-align: middle;
}