.reference-logo-showcase {
    padding: 64px 0 88px;
    background: linear-gradient(180deg, #f5f6f8 0%, #fafafb 100%);
    border-block: 1px solid #eceef1;
}

.reference-logo-showcase .reference-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference-logo-showcase .reference-logo-item {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.reference-logo-showcase .reference-logo-card {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1.65;
    padding: 28px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4e7eb;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgb(20 28 45 / 3%);
    text-decoration: none;
    isolation: isolate;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.reference-logo-showcase .reference-logo-card::after {
    position: absolute;
    inset: auto 36% 0;
    height: 2px;
    background: #dc0005;
    border-radius: 2px 2px 0 0;
    opacity: 0;
    content: "";
    transition: opacity 220ms ease;
}

.reference-logo-showcase .reference-logo-frame {
    display: block;
    width: 100%;
    max-width: 200px;
    height: 82px;
}

.reference-logo-showcase .reference-logo-frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    filter: grayscale(1) contrast(1.3);
    opacity: .82;
    transition: filter 350ms ease, opacity 350ms ease, transform 350ms ease;
}

.reference-logo-showcase .reference-logo-card:is(:hover, :focus-within, :active) img {
    filter: none;
    opacity: 1;
    transform: scale(1.04);
}

.reference-logo-showcase .reference-logo-card:focus-visible {
    outline: 3px solid #dc0005;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .reference-logo-showcase .reference-logo-card:hover {
        transform: translateY(-4px);
        border-color: #d9b6b9;
        box-shadow: 0 16px 36px rgb(20 28 45 / 8%);
    }

    .reference-logo-showcase .reference-logo-card:hover::after {
        opacity: 1;
    }
}

@media (max-width: 1199px) {
    .reference-logo-showcase .reference-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .reference-logo-showcase {
        padding: 36px 0 48px;
    }

    .reference-logo-showcase .reference-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .reference-logo-showcase .reference-logo-card {
        aspect-ratio: 1.45;
        padding: 22px;
        border-radius: 14px;
    }

    .reference-logo-showcase .reference-logo-frame {
        max-width: 170px;
        height: 64px;
    }
}

@media (max-width: 374px) {
    .reference-logo-showcase .reference-logo-card {
        padding: 16px;
    }

    .reference-logo-showcase .reference-logo-frame {
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reference-logo-showcase .reference-logo-card,
    .reference-logo-showcase .reference-logo-card::after,
    .reference-logo-showcase .reference-logo-frame img {
        transition: none;
    }

    .reference-logo-showcase .reference-logo-card:hover {
        transform: none;
    }
}