/* One slug-based lender artwork is shared by the card grid, table and comparison. */
.mfo-card-visual {
    height: auto;
    aspect-ratio: 3 / 2;
}

.mfo-card-visual .mfo-logo {
    inset: 0;
}

.mfo-card-visual .mfo-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
}

.mfo-card-visual:has(.mfo-logo img) .mfo-logo > span {
    opacity: 0;
}

.mfo-card-visual .mfo-card-badge {
    z-index: 4;
}

.mfo-table-logo {
    width: 72px;
    height: auto;
    aspect-ratio: 3 / 2;
    flex-basis: 72px;
}

.mfo-table-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.mfo-table-logo:has(img) b {
    opacity: 0;
}

.compare-swatch.mfo-table-logo {
    width: 132px;
    height: auto;
    aspect-ratio: 3 / 2;
    flex-basis: 132px;
    border-radius: 12px;
}

.lender-hero-art {
    object-fit: cover;
    object-position: center;
}

@media (max-width: 760px) {
    .compare-swatch.mfo-table-logo {
        width: 108px;
        flex-basis: 108px;
        border-radius: 10px;
    }
}