﻿.logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
    padding: 2rem;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120px; /* Fixed height for consistency */
}

    .logo-item img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain; /* Preserves logo proportions */
        filter: grayscale(0%); /* Or add grayscale(100%) on hover */
        transition: filter 0.3s ease;
    }

        /* Optional: subtle hover effect */
        .logo-item img:hover {
            filter: grayscale(0%);
            transform: scale(1.02);
        }
