.reference-logo-area {
    height: 148px;
}

.reference-card-logo {
    padding: 28px 36px;
}

@media (min-width: 1024px) {
    .reference-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.reference-card {
    box-shadow: 0 2px 6px rgb(0 0 0 / 3%);
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.reference-card:focus-within {
    border-color: hsl(var(--foreground) / .25);
    box-shadow: 0 12px 32px -16px rgb(0 0 0 / 20%);
}

.reference-card-logo {
    transition: transform .4s ease;
}

.reference-card-arrow {
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.reference-card-link:focus-visible .reference-card-arrow {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

@media (hover: hover) {
    .reference-card:hover {
        transform: translateY(-4px);
        border-color: hsl(var(--foreground) / .2);
        box-shadow: 0 16px 36px -18px rgb(0 0 0 / 22%);
    }

    .reference-card:hover .reference-card-logo {
        transform: scale(1.035);
    }

    .reference-card-link:hover .reference-card-arrow {
        background-color: hsl(var(--primary));
        color: hsl(var(--primary-foreground));
        transform: translate(1px, -1px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .reference-card,
    .reference-card-logo,
    .reference-card-arrow {
        transition: none;
    }

    .reference-card:hover,
    .reference-card:hover .reference-card-logo,
    .reference-card-link:hover .reference-card-arrow {
        transform: none;
    }
}