/* Responsive Logo Grid */
.logos-grid {
    max-width: 100%;
    align-content: flex-start !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 2rem 2rem;
    align-items: center;
    justify-items: start;
}

.logo-item {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    transition: all 0.3s ease;
    justify-self: start;
}

.logo-item:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-2px);
}

/* Responsive breakpoints */
@media (max-width: 576px) {
    .logo-item {
        height: 60px;
        max-width: 80px;
    }
    
    .logos-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
        grid-gap: 1.5rem 1.5rem !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .logo-item {
        height: 35px;
        max-width: 100px;
    }
    
    .logos-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        grid-gap: 1.75rem 1.75rem !important;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .logo-item {
        height: 38px;
        max-width: 110px;
    }
    
    .logos-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
        grid-gap: 1.875rem 1.875rem !important;
    }
}

@media (min-width: 993px) {
    .logo-item {
        height: 55px;
        max-width: 120px;
    }
}